Tabs Vue

In this example below you will see how to do a Tabs Vue with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tabs Vue</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="root" class="container">
  <tabs>
  <tab name="About Our Vision" :selected="true">
    <h1>Here is the content for the About Our Vision tab.</h1>
  </tab>
  <tab name="About Us">
    <h1>Here is the content for the About Us tab.</h1>
  </tab>
  <tab name="About Our Culture">
    <h1>Here is the content for the About Our Culture tab.</h1>
  </tab>
</tabs>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/tabs-vue-gGOYym */
body {
  padding-top: 40px;
}

/*Downloaded from https://www.codeseek.co/DM_Daria/tabs-vue-gGOYym */
Vue.component('tabs', {
  template:'<div><div class="tabs"><ul><li v-for="tab in tabs" :class="{ \'is-active\': tab.isActive }"><a href="#" @click="selectTab(tab)">{{ tab.name }}</a></li></ul></div><div class="tabs-details"><slot></slot></div></div>',
  
  data() {
    return { tabs: [] };
  },
  
  created() {
    this.tabs = this.$children;
  },
  
  methods: {
    selectTab(selectedTab) {
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
  
});

Vue.component('tab', {
  template:'<div v-show="isActive"><slot></slot></div>',
  
  props: {
    name: { required:true },
    selected: { default: false }
  },
  
  data() {
    return {
      isActive: false
    }
  },
  
  mounted() {
    this.isActive = this.selected;
  }
   
});


new Vue({
  el: '#root'
});

Comments