+198
-18
lines changedFilter options
+198
-18
lines changed Original file line number Diff line number Diff line change
@@ -495,6 +495,63 @@ assistive technologies – such as screen readers. Ensure that information denot
495 495
either obvious from the content itself (e.g. the visible text), or is included through alternative
496 496
means, such as additional text hidden with the `.sr-only` class.
497 497 498 +
## Nav integration
499 + 500 +
Integrate [`<b-nav>`](/docs/components/nav) into card headers easily.
501 + 502 +
**Using the `header` slot**:
503 + 504 +
```html
505 +
<div>
506 +
<b-card title="Card Title" body-class="text-center">
507 +
<b-nav slot="header" card-header tabs>
508 +
<b-nav-item active>Active</b-nav-item>
509 +
<b-nav-item>Inactive</b-nav-item>
510 +
<b-nav-item disabled>Disabled</b-nav-item>
511 +
</b-nav>
512 + 513 +
<b-card-text>
514 +
With supporting text below as a natural lead-in to additional content.
515 +
</b-card-text>
516 + 517 +
<b-button variant="primary">Go somewhere</b-button>
518 +
</b-card>
519 +
</div>
520 + 521 +
<!-- card-with-nav-header-slot.vue -->
522 +
```
523 + 524 +
**Using `<b-card-header>` sub-component:**
525 + 526 +
```html
527 +
<div>
528 +
<b-card no-body>
529 +
<b-card-header>
530 +
<b-nav card-header tabs>
531 +
<b-nav-item active>Active</b-nav-item>
532 +
<b-nav-item>Inactive</b-nav-item>
533 +
<b-nav-item disabled>Disabled</b-nav-item>
534 +
</b-nav>
535 +
</b-card-header>
536 + 537 +
<b-card-body class="text-center">
538 +
<b-card-title>Card Title</b-card-title>
539 + 540 +
<b-card-text>
541 +
With supporting text below as a natural lead-in to additional content.
542 +
</b-card-text>
543 + 544 +
<b-button variant="primary">Go somewhere</b-button>
545 +
</b-card-body>
546 +
</b-card>
547 +
</div>
548 + 549 +
<!-- card-with-nav-header-component.vue -->
550 +
```
551 + 552 +
For more information on using `<b-nav>` in card headers, refer to the
553 +
[Navs documentation](/docs/components/nav).
554 + 498 555
## Card groups
499 556 500 557
In addition to styling the content within cards, BootstrapVue includes a `<b-card-group>` component
@@ -170,10 +170,10 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
170 170
toggle-class="nav-link-custom"
171 171
right
172 172
>
173 -
<b-dropdown-item>one</b-dropdown-item>
174 -
<b-dropdown-item>two</b-dropdown-item>
173 +
<b-dropdown-item>One</b-dropdown-item>
174 +
<b-dropdown-item>Two</b-dropdown-item>
175 175
<b-dropdown-divider></b-dropdown-divider>
176 -
<b-dropdown-item>three</b-dropdown-item>
176 +
<b-dropdown-item>Three</b-dropdown-item>
177 177
</b-nav-item-dropdown>
178 178
</b-nav>
179 179
</div>
@@ -220,6 +220,96 @@ render the menu contents only when it is shown by setting the `lazy` prop to tru
220 220
See the [`<b-tabs>`](/docs/components/tabs) component for creating tabbable panes of local content
221 221
(not suited for navigation).
222 222 223 +
## Card integration
224 + 225 +
Use a `<b-nav>` in a [`<b-card>`](/docs/components/card) header, by enabling the `card-header` prop
226 +
on `<b-nav>` and setting either the `pills` or `tabs` props:
227 + 228 +
**Tabs style:**
229 + 230 +
```html
231 +
<div>
232 +
<b-card title="Card Title" body-class="text-center">
233 +
<b-nav slot="header" card-header tabs>
234 +
<b-nav-item active>Active</b-nav-item>
235 +
<b-nav-item>Inactive</b-nav-item>
236 +
<b-nav-item disabled>Disabled</b-nav-item>
237 +
<b-nav-item-dropdown text="Dropdown" right>
238 +
<b-dropdown-item>One</b-dropdown-item>
239 +
<b-dropdown-item>Two</b-dropdown-item>
240 +
<b-dropdown-item>Three</b-dropdown-item>
241 +
</b-nav-item-dropdown>
242 +
</b-nav>
243 + 244 +
<b-card-text>
245 +
With supporting text below as a natural lead-in to additional content.
246 +
</b-card-text>
247 + 248 +
<b-button variant="primary">Go somewhere</b-button>
249 +
</b-card>
250 +
</div>
251 + 252 +
<!-- nav-card-tabs.vue -->
253 +
```
254 + 255 +
**Pill style:**
256 + 257 +
```html
258 +
<div>
259 +
<b-card title="Card Title" body-class="text-center">
260 +
<b-nav slot="header" card-header pills>
261 +
<b-nav-item active>Active</b-nav-item>
262 +
<b-nav-item>Inactive</b-nav-item>
263 +
<b-nav-item disabled>Disabled</b-nav-item>
264 +
<b-nav-item-dropdown text="Dropdown" right>
265 +
<b-dropdown-item>One</b-dropdown-item>
266 +
<b-dropdown-item>Two</b-dropdown-item>
267 +
<b-dropdown-item>Three</b-dropdown-item>
268 +
</b-nav-item-dropdown>
269 +
</b-nav>
270 + 271 +
<b-card-text>
272 +
With supporting text below as a natural lead-in to additional content.
273 +
</b-card-text>
274 + 275 +
<b-button variant="primary">Go somewhere</b-button>
276 +
</b-card>
277 +
</div>
278 + 279 +
<!-- nav-card-pills.vue -->
280 +
```
281 + 282 +
**Plain style:**
283 + 284 +
The `card-header` prop is only needed when you are applying `tabs` or `pills` style.
285 + 286 +
```html
287 +
<div>
288 +
<b-card title="Card Title" body-class="text-center">
289 +
<b-nav slot="header">
290 +
<b-nav-item active>Active</b-nav-item>
291 +
<b-nav-item>Inactive</b-nav-item>
292 +
<b-nav-item disabled>Disabled</b-nav-item>
293 +
<b-nav-item-dropdown text="Dropdown" right>
294 +
<b-dropdown-item>One</b-dropdown-item>
295 +
<b-dropdown-item>Two</b-dropdown-item>
296 +
<b-dropdown-item>Three</b-dropdown-item>
297 +
</b-nav-item-dropdown>
298 +
</b-nav>
299 + 300 +
<b-card-text>
301 +
With supporting text below as a natural lead-in to additional content.
302 +
</b-card-text>
303 + 304 +
<b-button variant="primary">Go somewhere</b-button>
305 +
</b-card>
306 +
</div>
307 + 308 +
<!-- nav-card-plain.vue -->
309 +
```
310 + 311 +
The `card-header` prop has no effect if the `<b-nav>` is `vertical`.
312 + 223 313
## Accessibility
224 314 225 315
If you're using `<b-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
@@ -35,6 +35,11 @@ export const props = {
35 35
small: {
36 36
type: Boolean,
37 37
default: false
38 +
},
39 +
cardHeader: {
40 +
// Set to true if placing in a card header
41 +
type: Boolean,
42 +
default: false
38 43
}
39 44
}
40 45
@@ -58,7 +63,9 @@ export const BNav = /*#__PURE__*/ Vue.extend({
58 63
staticClass: 'nav',
59 64
class: {
60 65
'nav-tabs': props.tabs,
61 -
'nav-pills': props.pills,
66 +
'nav-pills': props.pills && !props.tabs,
67 +
'card-header-tabs': !props.vertical && props.cardHeader && props.tabs,
68 +
'card-header-pills': !props.vertical && props.cardHeader && props.pills && !props.tabs,
62 69
'flex-column': props.vertical,
63 70
'nav-fill': !props.vertical && props.fill,
64 71
'nav-justified': !props.vertical && props.justified,
@@ -179,4 +179,36 @@ describe('nav', () => {
179 179
expect(wrapper.classes().length).toBe(2)
180 180
expect(wrapper.text()).toBe('')
181 181
})
182 + 183 +
it('applies card-header-tabs class when tabs and card-header props set', async () => {
184 +
const wrapper = mount(BNav, {
185 +
propsData: {
186 +
tabs: true,
187 +
cardHeader: true
188 +
}
189 +
})
190 + 191 +
expect(wrapper.is('ul')).toBe(true)
192 +
expect(wrapper.classes()).toContain('nav')
193 +
expect(wrapper.classes()).toContain('nav-tabs')
194 +
expect(wrapper.classes()).toContain('card-header-tabs')
195 +
expect(wrapper.classes().length).toBe(3)
196 +
expect(wrapper.text()).toBe('')
197 +
})
198 + 199 +
it('applies card-header-pills class when pills and card-header props set', async () => {
200 +
const wrapper = mount(BNav, {
201 +
propsData: {
202 +
pills: true,
203 +
cardHeader: true
204 +
}
205 +
})
206 + 207 +
expect(wrapper.is('ul')).toBe(true)
208 +
expect(wrapper.classes()).toContain('nav')
209 +
expect(wrapper.classes()).toContain('nav-pills')
210 +
expect(wrapper.classes()).toContain('card-header-pills')
211 +
expect(wrapper.classes().length).toBe(3)
212 +
expect(wrapper.text()).toBe('')
213 +
})
182 214
})
Original file line number Diff line number Diff line change
@@ -232,17 +232,10 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
232 232
// This computed prop is sniffed by the tab child
233 233
return !this.noFade
234 234
},
235 -
navStyle() {
236 -
return this.pills ? 'pills' : 'tabs'
237 -
},
238 235
localNavClass() {
239 236
const classes = []
240 -
if (this.card) {
241 -
if (this.vertical) {
242 -
classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0')
243 -
} else {
244 -
classes.push(`card-header-${this.navStyle}`)
245 -
}
237 +
if (this.card && this.vertical) {
238 +
classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0')
246 239
}
247 240
return [...classes, this.navClass]
248 241
}
@@ -640,7 +633,8 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
640 633
tabs: !this.noNavStyle && !this.pills,
641 634
pills: !this.noNavStyle && this.pills,
642 635
vertical: this.vertical,
643 -
small: this.small
636 +
small: this.small,
637 +
cardHeader: this.card && !this.vertical
644 638
}
645 639
},
646 640
[this.normalizeSlot('tabs-start') || h(), buttons, this.normalizeSlot('tabs-end') || h()]
@@ -30,7 +30,7 @@ as well.
30 30
<template>
31 31
<div>
32 32
<b-card no-body>
33 -
<b-nav pills slot="header" v-b-scrollspy:nav-scroller>
33 +
<b-nav pills card-header slot="header" v-b-scrollspy:nav-scroller>
34 34
<b-nav-item href="#fat" @click="scrollIntoView">@fat</b-nav-item>
35 35
<b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>
36 36
<b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
@@ -111,15 +111,15 @@ also be active. Scroll the area next to the navbar and watch the active class ch
111 111
<b-col cols="4">
112 112
<b-navbar v-b-scrollspy:scrollspy-nested class="flex-column">
113 113
<b-navbar-brand href="#">Navbar</b-navbar-brand>
114 -
<b-nav pills class="flex-column">
114 +
<b-nav pills vertical>
115 115
<b-nav-item href="#item-1">Item 1</b-nav-item>
116 -
<b-nav pills class="flex-column">
116 +
<b-nav pills vertical>
117 117
<b-nav-item class="ml-3 my-1" href="#item-1-1">Item 1-1</b-nav-item>
118 118
<b-nav-item class="ml-3 my-1" href="#item-1-2">Item 1-2</b-nav-item>
119 119
</b-nav>
120 120
<b-nav-item href="#item-2">Item 2</b-nav-item>
121 121
<b-nav-item href="#item-3">Item 3</b-nav-item>
122 -
<b-nav pills class="flex-column">
122 +
<b-nav pills vertical>
123 123
<b-nav-item class="ml-3 my-1" href="#item-3-1">Item 3-1</b-nav-item>
124 124
<b-nav-item class="ml-3 my-1" href="#item-3-2">Item 3-2</b-nav-item>
125 125
</b-nav>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4