1 | # tabs
|
2 |
|
3 | [![NPM version](https://img.shields.io/npm/v/vue-slim-tabs.svg?style=flat)](https://npmjs.com/package/vue-slim-tabs) [![NPM downloads](https://img.shields.io/npm/dm/vue-slim-tabs.svg?style=flat)](https://npmjs.com/package/vue-slim-tabs) [![CircleCI](https://circleci.com/gh/egoist/vue-slim-tabs/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-slim-tabs/tree/master) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)
|
4 |
|
5 | ## Install
|
6 |
|
7 | ```bash
|
8 | yarn add vue-slim-tabs
|
9 | ```
|
10 |
|
11 | CDN: [UNPKG](https://unpkg.com/vue-slim-tabs/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-slim-tabs/dist/)
|
12 |
|
13 | ## Usage
|
14 |
|
15 | ```vue
|
16 | <template>
|
17 | <tabs>
|
18 | <tab title="Vue">
|
19 | This is Vue
|
20 | </tab>
|
21 | <tab title="React">
|
22 | This is React
|
23 | </tab>
|
24 | <tab title="Svelte">
|
25 | This is Svelte
|
26 | </tab>
|
27 | </tabs>
|
28 | </template>
|
29 |
|
30 | <script>
|
31 | import { Tabs, Tab } from 'vue-slim-tabs'
|
32 |
|
33 | export default {
|
34 | components: {
|
35 | Tabs, Tab
|
36 | }
|
37 | }
|
38 | </script>
|
39 |
|
40 | <!-- optionally use our default style -->
|
41 | <style src="vue-slim-tabs/themes/default.css"></style>
|
42 | ```
|
43 |
|
44 | You can use it as a plugin if you don't mind registering components globally:
|
45 |
|
46 | ```js
|
47 | import * as Tabs from 'vue-slim-tabs'
|
48 |
|
49 | Vue.use(Tabs)
|
50 | ```
|
51 |
|
52 | <details><summary>Use a slot as tab title</summary><br>
|
53 |
|
54 | ```vue
|
55 | <template>
|
56 | <tabs>
|
57 | <tab title-slot="vue">
|
58 | This is Vue
|
59 | </tab>
|
60 |
|
61 | <template slot="vue">
|
62 | <strong>Vue</strong>
|
63 | </template>
|
64 | </tabs>
|
65 | </template>
|
66 | ```
|
67 | </details>
|
68 |
|
69 | ## Props
|
70 |
|
71 | ### `<Tabs>`
|
72 |
|
73 | #### defaultIndex
|
74 |
|
75 | Type: `Number`<br>
|
76 | Default: `0`
|
77 |
|
78 | Index of selected tab on the first render.
|
79 |
|
80 | #### onSelect
|
81 |
|
82 | Type: `function`<br>
|
83 | Default: `undefined`
|
84 |
|
85 | The function to invoke as user selects a tab by clicking:
|
86 |
|
87 | ```js
|
88 | function onSelect(e, index) {
|
89 | // e: click event
|
90 | // index: index of selected tab
|
91 | }
|
92 | ```
|
93 |
|
94 | ### `<Tab>`
|
95 |
|
96 | #### title
|
97 |
|
98 | Type: `string` `vNode`<br>
|
99 | Required: required unless `titleSlot` is set
|
100 |
|
101 | Use a string or vNode as tab title.
|
102 |
|
103 | #### titleSlot
|
104 |
|
105 | Type: `string`
|
106 |
|
107 | Use a slot as the tab title.
|
108 |
|
109 | #### disabled
|
110 |
|
111 | Type: `Boolean`<br>
|
112 | Default: `undefined`
|
113 |
|
114 | Disable relevant tab, i.e. make it unselectable.
|
115 |
|
116 | ## Development
|
117 |
|
118 | Run the example with [Poi](https://poi.js.org):
|
119 |
|
120 | ```bash
|
121 | cd vue-slim-tabs
|
122 | yarn
|
123 | yarn dev
|
124 | ```
|
125 |
|
126 | ## Contributing
|
127 |
|
128 | 1. Fork it!
|
129 | 2. Create your feature branch: `git checkout -b my-new-feature`
|
130 | 3. Commit your changes: `git commit -am 'Add some feature'`
|
131 | 4. Push to the branch: `git push origin my-new-feature`
|
132 | 5. Submit a pull request :D
|
133 |
|
134 |
|
135 | ## Author
|
136 |
|
137 | **vue-slim-tabs** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
|
138 | Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-slim-tabs/contributors)).
|
139 |
|
140 | > [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/rem_rin_rin)
|