Skip to content

Commit f70b8a6

Browse files
cristijoracristijora
committed
Add documentation site
1 parent 54291ce commit f70b8a6

File tree

3 files changed

+310
-0
lines changed

3 files changed

+310
-0
lines changed

‎docs/.nojekyll‎

Whitespace-only changes.

‎docs/README.md‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
# Vue-tabs
2+
Simplified, customizable bootstrap based tabs
3+
Vue-tabs is a tab component which simplifies the usage of tabs and their customization
4+
## Demos
5+
* [Basic demo](https://jsfiddle.net/CristiJ/b44cc4dq/22/)
6+
* [Icons and colors](https://jsfiddle.net/CristiJ/b44cc4dq/26/)
7+
* [Full width centered tabs with text bellow](https://jsfiddle.net/CristiJ/b44cc4dq/29/)
8+
* [Vertical tabs](https://jsfiddle.net/CristiJ/b44cc4dq/32/)
9+
* [In browser Plaground](?id=playground)
10+
11+
## Usage
12+
## NPM
13+
`npm install --save vue-nav-tabs `
14+
`yarn add --dev vue-nav-tabs`
15+
16+
## Direct script include
17+
Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links)
18+
```html
19+
<link rel="stylesheet" href="https://unpkg.com/vue-nav-tabs/dist/vue-tabs.min.css">
20+
<script src="https://unpkg.com/vue-nav-tabs/dist/vue-tabs.js"></script>
21+
22+
Vue.use(VueTabs)
23+
```
24+
## Component registration
25+
```js
26+
//global registration
27+
import VueTabs from 'vue-nav-tabs'
28+
import 'vue-nav-tabs/dist/vue-tabs.min.css'
29+
Vue.use(VueTabs)
30+
31+
//local registration
32+
import {VueTabs, VTab} from 'vue-nav-tabs'
33+
//you can also import this in your style tag
34+
import 'vue-nav-tabs/dist/vue-tabs.min.css'
35+
//component code
36+
components: {
37+
VueTabs,
38+
VTab
39+
}
40+
```
41+
```html
42+
<vue-tabs>
43+
<v-tab title="First tab">
44+
First tab content
45+
</v-tab>
46+
47+
<v-tab title="Second tab">
48+
Second tab content
49+
</v-tab>
50+
51+
<v-tab title="Third tab">
52+
Third tab content
53+
</v-tab>
54+
</vue-tabs>
55+
```
56+
57+
# Props
58+
59+
## Vue-tabs props
60+
```js
61+
props: {
62+
title: {
63+
type: String,
64+
default: ''
65+
},
66+
/***
67+
* Icon name for the upper circle corresponding to the tab
68+
* Supports themify icons only for now.
69+
*/
70+
icon: {
71+
type: String,
72+
default: ''
73+
},
74+
/***
75+
* Function to execute before tab switch. Return value must be boolean
76+
* If the return result is false, tab switch is restricted
77+
*/
78+
beforeChange: {
79+
type: Function
80+
},
81+
route: {
82+
type: [String, Object]
83+
}
84+
}
85+
```
86+
87+
## V-tab props
88+
89+
```js
90+
props: {
91+
title: {
92+
type: String,
93+
default: ''
94+
},
95+
icon: {
96+
type: String,
97+
default: ''
98+
}
99+
}
100+
```
101+
102+
## Events
103+
104+
Event Name | Params
105+
------------ | -------------
106+
tab-change | tabIndex, newTab, oldTab
107+
108+
### tab-change example
109+
110+
Template
111+
```html
112+
<vue-tabs @tab-change="handleTabChange">
113+
<v-tab title="First tab">
114+
First tab content
115+
</v-tab>
116+
117+
<v-tab title="Second tab">
118+
Second tab content
119+
</v-tab>
120+
121+
<v-tab title="Third tab">
122+
Third tab content
123+
</v-tab>
124+
</vue-tabs>
125+
```
126+
Javascript
127+
```js
128+
methods:{
129+
handleTabChange(tabIndex, newTab, oldTab){
130+
//your code here
131+
}
132+
}
133+
```
134+
135+
JSFiddle example - https://jsfiddle.net/b44cc4dq/56/
136+
137+
# Playground
138+
139+
## Simple
140+
141+
<vuep template="#simpleexample"></vuep>
142+
143+
<script v-pre type="text/x-template" id="simpleexample">
144+
<template>
145+
<vue-tabs>
146+
<v-tab title="First tab">
147+
First tab content
148+
</v-tab>
149+
150+
<v-tab title="Second tab">
151+
Second tab content
152+
</v-tab>
153+
154+
<v-tab title="Third tab">
155+
Third tab content
156+
</v-tab>
157+
</vue-tabs>
158+
159+
</template>
160+
161+
<script>
162+
Vue.use(VueTabs);
163+
export default {}
164+
</script>
165+
</script>
166+
167+
168+
## Icons and colored tabs
169+
<p class="tip">
170+
Note that the icons are imported separately (via script tag in this case).
171+
In the demos below themify-icons are used, but you can use pretty much any icons you wish.
172+
</p>
173+
<vuep template="#icons"></vuep>
174+
175+
<script v-pre type="text/x-template" id="icons">
176+
<template>
177+
<vue-tabs active-tab-color="#9b59b6"
178+
active-text-color="white">
179+
<v-tab title="First tab" icon="ti-user">
180+
First tab content
181+
</v-tab>
182+
183+
<v-tab title="Second tab" icon="ti-settings">
184+
Second tab content
185+
</v-tab>
186+
187+
<v-tab title="Third tab" icon="ti-check">
188+
Third tab content
189+
</v-tab>
190+
</vue-tabs>
191+
192+
</template>
193+
194+
<script>
195+
Vue.use(VueTabs);
196+
export default {}
197+
</script>
198+
</script>
199+
200+
201+
## Full width tabs
202+
203+
<vuep template="#fullpage"></vuep>
204+
205+
<script v-pre type="text/x-template" id="fullpage">
206+
<template>
207+
<vue-tabs active-tab-color="#e74c3c"
208+
active-text-color="white"
209+
type="pills"
210+
text-position="bottom"
211+
centered
212+
>
213+
<v-tab title="First tab" icon="ti-user">
214+
First tab content
215+
</v-tab>
216+
217+
<v-tab title="Second tab" icon="ti-settings">
218+
Second tab content
219+
</v-tab>
220+
221+
<v-tab title="Third tab" icon="ti-check">
222+
Third tab content
223+
</v-tab>
224+
</vue-tabs>
225+
226+
</template>
227+
228+
<script>
229+
Vue.use(VueTabs);
230+
export default {}
231+
</script>
232+
</script>
233+
234+
## Vertical tabs
235+
236+
<vuep template="#vertical"></vuep>
237+
238+
<script v-pre type="text/x-template" id="vertical">
239+
<template>
240+
<vue-tabs active-tab-color="#e74c3c"
241+
active-text-color="white"
242+
type="pills"
243+
:start-index="1"
244+
direction="vertical">
245+
<v-tab title="First tab" icon="ti-user">
246+
First tab content
247+
</v-tab>
248+
249+
<v-tab title="Second tab" icon="ti-settings">
250+
Second tab content
251+
</v-tab>
252+
253+
<v-tab title="Third tab" icon="ti-check">
254+
Third tab content
255+
</v-tab>
256+
</vue-tabs>
257+
258+
</template>
259+
260+
<script>
261+
Vue.use(VueTabs);
262+
export default {}
263+
</script>
264+
</script>

‎docs/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vue-nav-tabs - A vue based tab component</title>
6+
<meta name="description" content="A vue based tab component">
7+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8+
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
9+
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-tabs/master/dist/vue-tabs.min.css">
10+
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
11+
<link rel="stylesheet" href="https://unpkg.com/vuep/dist/vuep.css">
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
</body>
16+
<script>
17+
window.$docsify = {
18+
name: 'vue-nav-tabs',
19+
repo: 'https://github.com/cristijora/vue-tabs'
20+
}
21+
</script>
22+
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
23+
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
24+
<script src="https://unpkg.com/vue"></script>
25+
<script src="https://rawgit.com/cristijora/vue-tabs/master/dist/vue-tabs.js"></script>
26+
<script src="https://unpkg.com/vuep"></script>
27+
28+
<style type="text/css">
29+
.vuep{
30+
height: inherit !important;
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
35+
.vuep-editor,
36+
.vuep-preview{
37+
width:100%;
38+
}
39+
40+
.cm-s-material .cm-error{
41+
color: rgba(255, 83, 112, 1);
42+
background-color: inherit !important;
43+
}
44+
45+
</style>
46+
</html>

0 commit comments

Comments
 (0)