+142
-34
lines changedFilter options
+142
-34
lines changed Original file line number Diff line number Diff line change
@@ -23,6 +23,13 @@ types of navigation components. It includes some style overrides (for working wi
23 23
padding for larger hit areas, and basic disabled styling. No active states are included in the base
24 24
nav.
25 25 26 +
`<b-nav>` supports teh following child components:
27 + 28 +
- `<b-nav-item>` for actionable links (or router-links)
29 +
- `<b-nav-item-dropdown>` for dropdowns
30 +
- `<b-nav-text>` for plain text content
31 +
- `<b-nav-form>` for inline forms
32 + 26 33
## Link appearance
27 34 28 35
Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These
@@ -215,6 +222,44 @@ shown. When there are a large number of dropdowns rendered on the same page, per
215 222
impacted due to larger overall memory utilization. You can instruct `<b-nav-item-dropdown>` to
216 223
render the menu contents only when it is shown by setting the `lazy` prop to true.
217 224 225 +
## Nav text content
226 + 227 +
Use the `<b-nav-text>` child component to place plain text content into the nav:
228 + 229 +
```html
230 +
<div>
231 +
<b-nav >
232 +
<b-nav-item href="#1">Link 1</b-nav-item>
233 +
<b-nav-item href="#2">Link 2</b-nav-item>
234 +
<b-nav-text>Plain text</b-nav-text>
235 +
</b-nav>
236 +
</div>
237 + 238 +
<!-- b-nav-text.vue -->
239 +
```
240 + 241 +
## Nav inline forms
242 + 243 +
Use the `<b-nav-form>` child component to place an _inline_ form into the nav:
244 + 245 +
```html
246 +
<div>
247 +
<b-nav pills>
248 +
<b-nav-item href="#1" active>Link 1</b-nav-item>
249 +
<b-nav-item href="#2">Link 2</b-nav-item>
250 +
<b-nav-form @submit.stop.prevent="alert('Form Submitted')">
251 +
<b-form-input aria-label="Input" class="mr-1"></b-form-input>
252 +
<b-button type="submit">Ok</b-button>
253 +
</b-nav-form>
254 +
</b-nav>
255 +
</div>
256 + 257 +
<!-- b-nav-form.vue -->
258 +
```
259 + 260 +
Refer to the [`<b-form>` inline](/docs/components/form#inline-form) documentation for additional
261 +
details on placing form controls.
262 + 218 263
## Tabbed local content support
219 264 220 265
See the [`<b-tabs>`](/docs/components/tabs) component for creating tabbable panes of local content
@@ -3,14 +3,35 @@ import { mergeData } from 'vue-functional-data-merge'
3 3
import { omit } from '../../utils/object'
4 4
import { BForm, props as BFormProps } from '../form/form'
5 5 6 -
export const props = omit(BFormProps, ['inline'])
6 +
export const props = {
7 +
...omit(BFormProps, ['inline']),
8 +
formClass: {
9 +
type: [String, Array, Object],
10 +
default: null
11 +
}
12 +
}
7 13 8 14
// @vue/component
9 15
export const BNavForm = /*#__PURE__*/ Vue.extend({
10 16
name: 'BNavForm',
11 17
functional: true,
12 18
props,
13 -
render(h, { props, data, children }) {
14 -
return h(BForm, mergeData(data, { props: { ...props, inline: true } }), children)
19 +
render(h, { props, data, children, listeners = {} }) {
20 +
const attrs = data.attrs
21 +
// The following data properties are cleared out
22 +
// as they will be passed to BForm directly
23 +
data.attrs = {}
24 +
data.on = {}
25 +
const $form = h(
26 +
BForm,
27 +
{
28 +
class: props.formClass,
29 +
props: { ...props, inline: true },
30 +
attrs,
31 +
on: listeners
32 +
},
33 +
children
34 +
)
35 +
return h('li', mergeData(data, { staticClass: 'form-inline' }), [$form])
15 36
}
16 37
})
Original file line number Diff line number Diff line change
@@ -5,9 +5,14 @@ describe('nav > nav-form', () => {
5 5
it('has expected default structure', async () => {
6 6
const wrapper = mount(BNavForm)
7 7 8 -
expect(wrapper.is('form')).toBe(true)
8 +
expect(wrapper.is('li')).toBe(true)
9 9
expect(wrapper.classes()).toContain('form-inline')
10 10
expect(wrapper.classes().length).toBe(1)
11 + 12 +
const $form = wrapper.find('form')
13 +
expect($form.exists()).toBe(true)
14 +
expect($form.classes()).toContain('form-inline')
15 +
expect($form.classes().length).toBe(1)
11 16
expect(wrapper.text()).toEqual('')
12 17
})
13 18
@@ -18,9 +23,63 @@ describe('nav > nav-form', () => {
18 23
}
19 24
})
20 25 21 -
expect(wrapper.is('form')).toBe(true)
26 +
expect(wrapper.is('li')).toBe(true)
27 +
expect(wrapper.classes()).toContain('form-inline')
28 +
expect(wrapper.classes().length).toBe(1)
29 + 30 +
const $form = wrapper.find('form')
31 +
expect($form.exists()).toBe(true)
32 +
expect($form.classes()).toContain('form-inline')
33 +
expect($form.text()).toEqual('foobar')
34 +
})
35 + 36 +
it('applies ID to form when prop ID is set', async () => {
37 +
const wrapper = mount(BNavForm, {
38 +
propsData: {
39 +
id: 'baz'
40 +
},
41 +
slots: {
42 +
default: 'foobar'
43 +
}
44 +
})
45 + 46 +
expect(wrapper.is('li')).toBe(true)
47 +
expect(wrapper.classes()).toContain('form-inline')
48 +
expect(wrapper.classes().length).toBe(1)
49 + 50 +
const $form = wrapper.find('form')
51 +
expect($form.exists()).toBe(true)
52 +
expect($form.classes()).toContain('form-inline')
53 +
expect($form.text()).toEqual('foobar')
54 +
expect($form.attributes('id')).toEqual('baz')
55 +
})
56 + 57 +
it('listeners are bound to form element', async () => {
58 +
const onSubmit = jest.fn()
59 +
const wrapper = mount(BNavForm, {
60 +
propsData: {
61 +
id: 'baz'
62 +
},
63 +
listeners: {
64 +
submit: onSubmit
65 +
},
66 +
slots: {
67 +
default: 'foobar'
68 +
}
69 +
})
70 + 71 +
expect(wrapper.is('li')).toBe(true)
22 72
expect(wrapper.classes()).toContain('form-inline')
23 73
expect(wrapper.classes().length).toBe(1)
24 -
expect(wrapper.text()).toEqual('foobar')
74 + 75 +
const $form = wrapper.find('form')
76 +
expect($form.exists()).toBe(true)
77 +
expect($form.classes()).toContain('form-inline')
78 +
expect($form.text()).toEqual('foobar')
79 + 80 +
expect(onSubmit).not.toHaveBeenCalled()
81 + 82 +
$form.trigger('submit')
83 +
expect(onSubmit).toHaveBeenCalled()
25 84
})
26 85
})
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
1 1
import Vue from '../../utils/vue'
2 2
import { mergeData } from 'vue-functional-data-merge'
3 3 4 -
export const props = {
5 -
tag: {
6 -
type: String,
7 -
default: 'span'
8 -
}
9 -
}
4 +
export const props = {}
10 5 11 6
// @vue/component
12 7
export const BNavText = /*#__PURE__*/ Vue.extend({
13 8
name: 'BNavText',
14 9
functional: true,
15 10
props,
16 11
render(h, { props, data, children }) {
17 -
return h(props.tag, mergeData(data, { staticClass: 'navbar-text' }), children)
12 +
return h('li', mergeData(data, { staticClass: 'navbar-text' }), children)
18 13
}
19 14
})
Original file line number Diff line number Diff line change
@@ -5,20 +5,7 @@ describe('nav > nav-text', () => {
5 5
it('has expected default structure', async () => {
6 6
const wrapper = mount(BNavText)
7 7 8 -
expect(wrapper.is('span')).toBe(true)
9 -
expect(wrapper.classes()).toContain('navbar-text')
10 -
expect(wrapper.classes().length).toBe(1)
11 -
expect(wrapper.text()).toEqual('')
12 -
})
13 - 14 -
it('renders custom root element when prop tag is set', async () => {
15 -
const wrapper = mount(BNavText, {
16 -
propsData: {
17 -
tag: 'div'
18 -
}
19 -
})
20 - 21 -
expect(wrapper.is('div')).toBe(true)
8 +
expect(wrapper.is('li')).toBe(true)
22 9
expect(wrapper.classes()).toContain('navbar-text')
23 10
expect(wrapper.classes().length).toBe(1)
24 11
expect(wrapper.text()).toEqual('')
@@ -31,7 +18,7 @@ describe('nav > nav-text', () => {
31 18
}
32 19
})
33 20 34 -
expect(wrapper.is('span')).toBe(true)
21 +
expect(wrapper.is('li')).toBe(true)
35 22
expect(wrapper.classes()).toContain('navbar-text')
36 23
expect(wrapper.classes().length).toBe(1)
37 24
expect(wrapper.text()).toEqual('foobar')
@@ -80,13 +80,14 @@ Navbars come with built-in support for a handful of sub-components. Choose from
80 80
needed:
81 81 82 82
- `<b-navbar-brand>` for your company, product, or project name.
83 -
- `<b-navbar-nav>` for a full-height and lightweight navigation (including support for dropdowns).
84 -
- `<b-nav-item>` for link (and router-link) action items
85 -
- `<b-nav-item-dropdown>` for navbar dropdown menus
86 -
- `<b-nav-text>` for adding vertically centered strings of text.
87 -
- `<b-nav-form>` for any form controls and actions.
88 83
- `<b-navbar-toggle>` for use with the `<b-collapse is-nav>` component.
89 84
- `<b-collapse is-nav>` for grouping and hiding navbar contents by a parent breakpoint.
85 +
- `<b-navbar-nav>` for a full-height and lightweight navigation (including support for dropdowns).
86 +
The following sub-components inside `<b-navbar-nav>` are supported:
87 +
- `<b-nav-item>` for link (and router-link) action items
88 +
- `<b-nav-item-dropdown>` for nav dropdown menus
89 +
- `<b-nav-text>` for adding vertically centered strings of text.
90 +
- `<b-nav-form>` for any form controls and actions.
90 91 91 92
### `<b-navbar-brand>`
92 93
@@ -153,7 +154,7 @@ Navbar navigation links build on the `<b-navbar-nav>` parent component and requi
153 154
navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents
154 155
securely aligned.
155 156 156 -
`<b-navbar-nav>` supports the following components:
157 +
`<b-navbar-nav>` supports the following child components:
157 158 158 159
- `<b-nav-item>` for link (and router-link) action items
159 160
- `<b-nav-text>` for adding vertically centered strings of text.
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