feat(Tabs): add missing feat tabs
This commit is contained in:
xidedix
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div class="animated fadeIn">
|
||||||
|
<b-row>
|
||||||
|
<b-col xs="12" lg="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Tabs
|
||||||
|
</div>
|
||||||
|
<b-tabs>
|
||||||
|
<b-tab title="Home" active>
|
||||||
|
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab title="Profile" >
|
||||||
|
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab title="Disabled" disabled>
|
||||||
|
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" lg="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Tabs with icons
|
||||||
|
</div>
|
||||||
|
<b-tabs>
|
||||||
|
<b-tab active>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-calculator"></i>
|
||||||
|
</template>
|
||||||
|
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-basket-loaded"></i>
|
||||||
|
</template>
|
||||||
|
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-pie-chart"></i>
|
||||||
|
</template>
|
||||||
|
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" lg="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Tabs with icons
|
||||||
|
</div>
|
||||||
|
<b-tabs v-model="tabIndex[0]">
|
||||||
|
<b-tab active>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||||
|
</template>
|
||||||
|
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||||
|
</template>
|
||||||
|
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||||
|
</template>
|
||||||
|
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" lg="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Tabs vertical
|
||||||
|
</div>
|
||||||
|
<b-card no-body>
|
||||||
|
<b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
|
||||||
|
<b-tab active>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||||
|
</template>
|
||||||
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||||
|
</template>
|
||||||
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||||
|
</template>
|
||||||
|
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
|
officia deserunt mollit anim id est laborum.
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</b-card>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tabs',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tabIndex: [0, 0],
|
||||||
|
tabs: [
|
||||||
|
'Calculator',
|
||||||
|
'Shopping cart',
|
||||||
|
'Charts'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user