Skip to content

feat(b-nav): add card header support #3883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Aug 14, 2019
Merged

feat(b-nav): add card header support #3883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a837858
feat(b-nav): add card header support
tmorehouse Aug 14, 2019
8a5e3a2
Update nav.spec.js
tmorehouse Aug 14, 2019
6e9435b
Update nav.spec.js
tmorehouse Aug 14, 2019
3c239e7
Update nav.js
tmorehouse Aug 14, 2019
fab8413
Update tabs.js
tmorehouse Aug 14, 2019
f6aefdc
Update README.md
tmorehouse Aug 14, 2019
0b1ce2c
Update README.md
tmorehouse Aug 14, 2019
946351f
Update README.md
tmorehouse Aug 14, 2019
31fe03b
Update tabs.js
tmorehouse Aug 14, 2019
99be30e
Update README.md
jacobmllr95 Aug 14, 2019
bd8a33b
Update README.md
jacobmllr95 Aug 14, 2019
05faa51
Update README.md
tmorehouse Aug 14, 2019
d01cdb0
Update README.md
jacobmllr95 Aug 14, 2019
cade7ec
Update README.md
tmorehouse Aug 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions src/components/card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,63 @@ assistive technologies – such as screen readers. Ensure that information denot
either obvious from the content itself (e.g. the visible text), or is included through alternative
means, such as additional text hidden with the `.sr-only` class.

## Nav integration

Integrate [`<b-nav>`](/docs/components/nav) into card headers easily.

**Using the `header` slot**:

```html
<div>
<b-card title="Card Title" body-class="text-center">
<b-nav slot="header" card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>

<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>

<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>

<!-- card-with-nav-header-slot.vue -->
```

**Using `<b-card-header>` sub-component:**

```html
<div>
<b-card no-body>
<b-card-header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</b-card-header>

<b-card-body class="text-center">
<b-card-title>Card Title</b-card-title>

<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>

<b-button variant="primary">Go somewhere</b-button>
</b-card-body>
</b-card>
</div>

<!-- card-with-nav-header-component.vue -->
```

For more information on using `<b-nav>` in card headers, refer to the
[Navs documentation](/docs/components/nav).

## Card groups

In addition to styling the content within cards, BootstrapVue includes a `<b-card-group>` component
Expand Down
96 changes: 93 additions & 3 deletions src/components/nav/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,10 +170,10 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
toggle-class="nav-link-custom"
right
>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-item>One</b-dropdown-item>
<b-dropdown-item>Two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
<b-dropdown-item>Three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</div>
Expand Down Expand Up @@ -220,6 +220,96 @@ render the menu contents only when it is shown by setting the `lazy` prop to tru
See the [`<b-tabs>`](/docs/components/tabs) component for creating tabbable panes of local content
(not suited for navigation).

## Card integration

Use a `<b-nav>` in a [`<b-card>`](/docs/components/card) header, by enabling the `card-header` prop
on `<b-nav>` and setting either the `pills` or `tabs` props:

**Tabs style:**

```html
<div>
<b-card title="Card Title" body-class="text-center">
<b-nav slot="header" card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
<b-nav-item-dropdown text="Dropdown" right>
<b-dropdown-item>One</b-dropdown-item>
<b-dropdown-item>Two</b-dropdown-item>
<b-dropdown-item>Three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>

<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>

<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>

<!-- nav-card-tabs.vue -->
```

**Pill style:**

```html
<div>
<b-card title="Card Title" body-class="text-center">
<b-nav slot="header" card-header pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
<b-nav-item-dropdown text="Dropdown" right>
<b-dropdown-item>One</b-dropdown-item>
<b-dropdown-item>Two</b-dropdown-item>
<b-dropdown-item>Three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>

<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>

<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>

<!-- nav-card-pills.vue -->
```

**Plain style:**

The `card-header` prop is only needed when you are applying `tabs` or `pills` style.

```html
<div>
<b-card title="Card Title" body-class="text-center">
<b-nav slot="header">
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
<b-nav-item-dropdown text="Dropdown" right>
<b-dropdown-item>One</b-dropdown-item>
<b-dropdown-item>Two</b-dropdown-item>
<b-dropdown-item>Three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>

<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>

<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>

<!-- nav-card-plain.vue -->
```

The `card-header` prop has no effect if the `<b-nav>` is `vertical`.

## Accessibility

If you're using `<b-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
Expand Down
9 changes: 8 additions & 1 deletion src/components/nav/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ export const props = {
small: {
type: Boolean,
default: false
},
cardHeader: {
// Set to true if placing in a card header
type: Boolean,
default: false
}
}

Expand All @@ -58,7 +63,9 @@ export const BNav = /*#__PURE__*/ Vue.extend({
staticClass: 'nav',
class: {
'nav-tabs': props.tabs,
'nav-pills': props.pills,
'nav-pills': props.pills && !props.tabs,
'card-header-tabs': !props.vertical && props.cardHeader && props.tabs,
'card-header-pills': !props.vertical && props.cardHeader && props.pills && !props.tabs,
'flex-column': props.vertical,
'nav-fill': !props.vertical && props.fill,
'nav-justified': !props.vertical && props.justified,
Expand Down
32 changes: 32 additions & 0 deletions src/components/nav/nav.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,36 @@ describe('nav', () => {
expect(wrapper.classes().length).toBe(2)
expect(wrapper.text()).toBe('')
})

it('applies card-header-tabs class when tabs and card-header props set', async () => {
const wrapper = mount(BNav, {
propsData: {
tabs: true,
cardHeader: true
}
})

expect(wrapper.is('ul')).toBe(true)
expect(wrapper.classes()).toContain('nav')
expect(wrapper.classes()).toContain('nav-tabs')
expect(wrapper.classes()).toContain('card-header-tabs')
expect(wrapper.classes().length).toBe(3)
expect(wrapper.text()).toBe('')
})

it('applies card-header-pills class when pills and card-header props set', async () => {
const wrapper = mount(BNav, {
propsData: {
pills: true,
cardHeader: true
}
})

expect(wrapper.is('ul')).toBe(true)
expect(wrapper.classes()).toContain('nav')
expect(wrapper.classes()).toContain('nav-pills')
expect(wrapper.classes()).toContain('card-header-pills')
expect(wrapper.classes().length).toBe(3)
expect(wrapper.text()).toBe('')
})
})
14 changes: 4 additions & 10 deletions src/components/tabs/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,17 +232,10 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
// This computed prop is sniffed by the tab child
return !this.noFade
},
navStyle() {
return this.pills ? 'pills' : 'tabs'
},
localNavClass() {
const classes = []
if (this.card) {
if (this.vertical) {
classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0')
} else {
classes.push(`card-header-${this.navStyle}`)
}
if (this.card && this.vertical) {
classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0')
}
return [...classes, this.navClass]
}
Expand Down Expand Up @@ -640,7 +633,8 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
tabs: !this.noNavStyle && !this.pills,
pills: !this.noNavStyle && this.pills,
vertical: this.vertical,
small: this.small
small: this.small,
cardHeader: this.card && !this.vertical
}
},
[this.normalizeSlot('tabs-start') || h(), buttons, this.normalizeSlot('tabs-end') || h()]
Expand Down
8 changes: 4 additions & 4 deletions src/directives/scrollspy/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ as well.
<template>
<div>
<b-card no-body>
<b-nav pills slot="header" v-b-scrollspy:nav-scroller>
<b-nav pills card-header slot="header" v-b-scrollspy:nav-scroller>
<b-nav-item href="#fat" @click="scrollIntoView">@fat</b-nav-item>
<b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>
<b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
Expand Down Expand Up @@ -111,15 +111,15 @@ also be active. Scroll the area next to the navbar and watch the active class ch
<b-col cols="4">
<b-navbar v-b-scrollspy:scrollspy-nested class="flex-column">
<b-navbar-brand href="#">Navbar</b-navbar-brand>
<b-nav pills class="flex-column">
<b-nav pills vertical>
<b-nav-item href="#item-1">Item 1</b-nav-item>
<b-nav pills class="flex-column">
<b-nav pills vertical>
<b-nav-item class="ml-3 my-1" href="#item-1-1">Item 1-1</b-nav-item>
<b-nav-item class="ml-3 my-1" href="#item-1-2">Item 1-2</b-nav-item>
</b-nav>
<b-nav-item href="#item-2">Item 2</b-nav-item>
<b-nav-item href="#item-3">Item 3</b-nav-item>
<b-nav pills class="flex-column">
<b-nav pills vertical>
<b-nav-item class="ml-3 my-1" href="#item-3-1">Item 3-1</b-nav-item>
<b-nav-item class="ml-3 my-1" href="#item-3-2">Item 3-2</b-nav-item>
</b-nav>
Expand Down