Permalink
Browse files

feat(tabs): New props for adding classes to nav tab (#1289)

* [tab] Add prop for adding class to nav li.nav-item

* [tabs] Pull nav-link and nav-item classes from child tab

* [tab] Update new prop names

* Update README.md

* Add support for class object

* Add title-*-class exmple

* Update README.md
  • Loading branch information...
tmorehouse committed Nov 6, 2017
1 parent c9a8144 commit c6d3642fe590c50df1e8200a436f6dfe0bd3b3d8
Showing with 67 additions and 4 deletions.
  1. +55 −2 src/components/tabs/README.md
  2. +10 −0 src/components/tabs/tab.vue
  3. +2 −2 src/components/tabs/tabs.vue
@@ -43,9 +43,11 @@ by `card-body`.
<!-- with-card.vue -->
```
## Pills variant
Just add `pills` property to `<b-tabs>`.
Tabs use the `tabs` styling by default. Just add `pills` property to `<b-tabs>` for
the pill style variant.
```html
<b-card no-body>
@@ -67,6 +69,7 @@ Just add `pills` property to `<b-tabs>`.
Fade is enabled by default when changing tabs. It can disabled with `no-fade` property.
## Add Tabs without content
If you want to add extra tabs that do not have any content, you can put them in `tabs` slot:
@@ -80,6 +83,56 @@ If you want to add extra tabs that do not have any content, you can put them in
</b-tabs>
```
## Apply custom classes to the generated nav-tabs or pills
The tab selectors are based on Boostrap V4's `nav` markup ( i.e. `ul.nav > li.nav-item > a.nav-link`).
In some situations, you may want to add classes to the `<li>` (nav-item) and/or the
`<a>` (nav-link) on a per tab basis. To do so, simply supply the classname to
the `title-item-class` prop (for the `<li>` element) or `title-link-class` prop (for the
`<a>` element). Value's can be passed as a string or array of strings.
Note: THe `ative` class is automatically applied to the `<a>` element. You may need to accomodate
your custom classes for this.
```html
<template>
<b-card no-body>
<b-tabs card v-model="tabIndex">
<b-tab title="Tab 1" :title-link-class="linkClass(0)">
Tab Contents 1
</b-tab>
<b-tab title="Tab 2" :title-link-class="linkClass(1)">
Tab Contents 2
</b-tab>
<b-tab title="Tab 3" :title-link-class="linkClass(2)">
Tab Contents 3
</b-tab>
</b-tabs>
</b-card>
</template>
<script>
export default {
data: {
tabIndex: 0
},
methods: {
linkClass(idx) {
if (this.tabIndex === idx) {
return ['bg-primary', 'text-light'];
} else {
return ['bg-light', 'text-info'];
}
}
}
}
</script>
<!-- with-classes.vue -->
```
## Advanced Examples
### External controls
@@ -122,7 +175,7 @@ If you want to add extra tabs that do not have any content, you can put them in
export default {
data: {
tabIndex: 0
},
}
}
</script>
@@ -85,6 +85,16 @@
type: String,
default: ''
},
titleItemClass: {
// Sniffed by tabs.vue and added to nav 'li.nav-item'
type: [String, Array, Object],
default: null
},
titleLinkClass: {
// Sniffed by tabs.vue and added to nav 'a.nav-link'
type: [String, Array, Object],
default: null
},
headHtml: {
type: String,
default: null
@@ -18,8 +18,8 @@
@keydown.shift.right="setTab(tabs.length-1,false,-1)"
@keydown.shift.down="setTab(tabs.length-1,false,-1)"
>
<li class="'nav-item" v-for="(tab, index) in tabs" role="presentation">
<a :class="['nav-link',{active: tab.localActive, disabled: tab.disabled}]"
<li :class="['nav-item', tab.titleItemClass]" v-for="(tab, index) in tabs" role="presentation">
<a :class="['nav-link',{active: tab.localActive, disabled: tab.disabled}, tab.titleLinkClass]"
:href="tab.href"
role="tab"
:aria-setsize="tabs.length"

0 comments on commit c6d3642

Please sign in to comment.