├── package.json
├── src
    ├── Tab.vue
    ├── Demo.vue
    └── Tabs.vue
└── README.md


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "learn-vue-tabs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC"
11 | }
12 | 


--------------------------------------------------------------------------------
/src/Tab.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class='tab' v-show='isActive'>
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     title: {
11 |       type: String,
12 |       default: 'Tab'
13 |     }
14 |   },
15 |   data () {
16 |     return {
17 |       isActive: true
18 |     }
19 |   }
20 | }
21 | </script>
22 | 
23 | <style lang="css">
24 | 
25 | </style>
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LearnVue Reusable Tabs Component Tutorial
 2 | 
 3 | This is the starter code for the learnvue.co Reusable Tabs Component Tutorial.
 4 | 
 5 | To simplify this repo, we used a global install of the vue-cli.
 6 | 
 7 | In order to run this repo, do vue/cli-service-global by
 8 | 
 9 | `npm install -g @vue/cli-service-global`
10 | 
11 | And run the app using
12 | 
13 | `vue serve src/Demo.vue`.
14 | 
15 | For further questions, email matt@learnvue.co or checkout learnvue.co
16 | 


--------------------------------------------------------------------------------
/src/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class='wrapper'>
 3 |     <button class='change__style' @click='changeStyle()'>Change Style</button>
 4 |     <tabs :mode="mode">
 5 |       <tab title="Tab 1">Hello From Tab 1</tab>
 6 |       <tab title="Tab 2">Hello From Tab 2</tab>
 7 |       <tab title="Tab 3">Hello From Tab 3</tab>
 8 |       <tab title="Tab 4">Hello From Tab 4</tab>
 9 |     </tabs>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import Tab from './Tab.vue'
15 | import Tabs from './Tabs.vue'
16 | 
17 | export default {
18 |   components: {
19 |     Tab,
20 |     Tabs
21 |   },
22 |   data () {
23 |     return {
24 |       mode: 'dark'
25 |     }
26 |   },
27 |   methods: {
28 |     changeStyle () {
29 |       if (this.mode === 'dark') {
30 |         this.mode = 'light'
31 |       } else {
32 |         this.mode = 'dark'
33 |       }
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="css">
40 |   * {
41 |     margin: 0;
42 |     padding: 0;
43 |     font-family: 'Karla', sans-serif;
44 |   }
45 |   .wrapper {
46 |     width: 100%;
47 |     min-height: 100vh;
48 |     background-color: #f8f8f8;
49 |     margin: 0;
50 |     padding: 20px;
51 |   }
52 | 
53 |   .change__style {
54 |     background-color: #eee;
55 |     font-size: 1em;
56 |     margin-bottom: 10px;
57 |     padding: 5px;
58 |   }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/Tabs.vue:
--------------------------------------------------------------------------------
  1 | <template lang="html">
  2 |   <div :class='{"tabs__light": mode === "light", "tabs__dark": mode === "dark"}'>
  3 |     <ul class='tabs__header'>
  4 |       <li v-for='(tab, index) in tabs'
  5 |         :key='tab.title'
  6 |         @click='selectTab(index)'
  7 |         :class='{"tab__selected": (index == selectedIndex)}'>
  8 |         {{ tab.title }}
  9 |       </li>
 10 |     </ul>
 11 |     <slot></slot>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   props: {
 18 |     mode: {
 19 |       type: String,
 20 |       default: 'light'
 21 |     }
 22 |   },
 23 |   data () {
 24 |     return {
 25 |       selectedIndex: 0, // the index of the selected tab,
 26 |       tabs: []         // all of the tabs
 27 |     }
 28 |   },
 29 |   created () {
 30 |     this.tabs = this.$children
 31 |   },
 32 |   mounted () {
 33 |     this.selectTab(0)
 34 |   },
 35 |   methods: {
 36 |     selectTab (i) {
 37 |       this.selectedIndex = i
 38 | 
 39 |       // loop over all the tabs
 40 |       this.tabs.forEach((tab, index) => {
 41 |         tab.isActive = (index === i)
 42 |       })
 43 |     }
 44 |   }
 45 | }
 46 | </script>
 47 | 
 48 | <style lang="css">
 49 | 
 50 |   ul.tabs__header {
 51 |     display: block;
 52 |     list-style: none;
 53 |     margin: 0 0 0 20px;
 54 |     padding: 0;
 55 |   }
 56 | 
 57 |   ul.tabs__header > li {
 58 |     padding: 15px 30px;
 59 |     border-radius: 10px;
 60 |     margin: 0;
 61 |     display: inline-block;
 62 |     margin-right: 5px;
 63 |     cursor: pointer;
 64 |   }
 65 | 
 66 |   ul.tabs__header > li.tab__selected {
 67 |     font-weight: bold;
 68 |     border-radius: 10px 10px 0 0;
 69 |     border-bottom: 8px solid transparent;
 70 |   }
 71 | 
 72 |   .tab {
 73 |     display: inline-block;
 74 |     color: black;
 75 |     padding: 20px;
 76 |     min-width: 800px;
 77 |     border-radius: 10px;
 78 |     min-height: 400px;
 79 |   }
 80 | 
 81 |   .tabs__light .tab{
 82 |     background-color: #fff;
 83 |   }
 84 | 
 85 |   .tabs__light li {
 86 |     background-color: #ddd;
 87 |     color: #aaa;
 88 |   }
 89 | 
 90 |   .tabs__light li.tab__selected {
 91 |     background-color: #fff;
 92 |     color: #83FFB3;
 93 |   }
 94 | 
 95 |   .tabs__dark .tab{
 96 |     background-color: #555;
 97 |     color: #eee;
 98 |   }
 99 | 
100 |   .tabs__dark li {
101 |     background-color: #ddd;
102 |     color: #aaa;
103 |   }
104 | 
105 |   .tabs__dark li.tab__selected {
106 |     background-color: #555;
107 |     color: white;
108 | 
109 |   }
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------