+101
-8
lines changedFilter options
+101
-8
lines changed Original file line number Diff line number Diff line change
@@ -308,6 +308,58 @@ split button its own variant via the `split-variant` prop.
308 308
<!-- b-dropdown-split-variant.vue -->
309 309
```
310 310 311 +
### Block level dropdowns
312 + 313 +
By default dropdowns act like buttons and are displayed inline. To create block level dropdowns
314 +
(that span to the full width of a parent) set the `block` prop. Both, regular and split button
315 +
dropdowns are supported.
316 + 317 +
```html
318 +
<div>
319 +
<b-dropdown text="Block Level Dropdown" block variant="primary" class="m-2">
320 +
<b-dropdown-item href="#">Action</b-dropdown-item>
321 +
<b-dropdown-item href="#">Another action</b-dropdown-item>
322 +
<b-dropdown-item href="#">Something else here</b-dropdown-item>
323 +
</b-dropdown>
324 + 325 +
<b-dropdown
326 +
text="Block Level Split Dropdown"
327 +
block
328 +
split
329 +
split-variant="outline-primary"
330 +
variant="primary"
331 +
class="m-2"
332 +
>
333 +
<b-dropdown-item href="#">Action</b-dropdown-item>
334 +
<b-dropdown-item href="#">Another action</b-dropdown-item>
335 +
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
336 +
</b-dropdown>
337 +
</div>
338 + 339 +
<!-- b-dropdown-block.vue -->
340 +
```
341 + 342 +
If you want the dropdown menu to span to the full width of the parent container too, add the `w-100`
343 +
utility class to the `menu-class` prop.
344 + 345 +
```html
346 +
<div>
347 +
<b-dropdown
348 +
text="Block Level Dropdown Menu"
349 +
block
350 +
variant="primary"
351 +
class="m-2"
352 +
menu-class="w-100"
353 +
>
354 +
<b-dropdown-item href="#">Action</b-dropdown-item>
355 +
<b-dropdown-item href="#">Another action</b-dropdown-item>
356 +
<b-dropdown-item href="#">Something else here</b-dropdown-item>
357 +
</b-dropdown>
358 +
</div>
359 + 360 +
<!-- b-dropdown-block-menu.vue -->
361 +
```
362 + 311 363
### Dropdown sub-component color variants
312 364 313 365
Many of the supported dropdown [sub-components](#dropdown-supported-sub-components) provide a
@@ -24,6 +24,10 @@ export const props = {
24 24
type: String,
25 25
default: () => getComponentConfig(NAME, 'variant')
26 26
},
27 +
block: {
28 +
type: Boolean,
29 +
default: false
30 +
},
27 31
menuClass: {
28 32
type: [String, Array],
29 33
default: null
@@ -84,9 +88,16 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
84 88
this.directionClass,
85 89
{
86 90
show: this.visible,
87 -
// Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
88 -
// when boundary is anything other than `scrollParent`
89 -
// See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
91 +
// The 'btn-group' class is required in `split` mode for button alignment
92 +
// It needs also to be applied when `block` is disabled to allow multiple
93 +
// dropdowns to be aligned one line
94 +
'btn-group': this.split || !this.block,
95 +
// When `block` is enabled and we are in `split` mode the 'd-flex' class
96 +
// needs to be applied to allow the buttons to stretch to full width
97 +
'd-flex': this.block && this.split,
98 +
// Position `static` is needed to allow menu to "breakout" of the `scrollParent`
99 +
// boundaries when boundary is anything other than `scrollParent`
100 +
// See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
90 101
'position-static': this.boundary !== 'scrollParent' || !this.boundary
91 102
}
92 103
]
@@ -115,9 +126,10 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
115 126
const buttonContent = this.normalizeSlot('button-content') || this.html || stripTags(this.text)
116 127
if (this.split) {
117 128
const btnProps = {
118 -
disabled: this.disabled,
119 129
variant: this.splitVariant || this.variant,
120 -
size: this.size
130 +
size: this.size,
131 +
block: this.block,
132 +
disabled: this.disabled
121 133
}
122 134
// We add these as needed due to router-link issues with defined property with undefined/null values
123 135
if (this.splitTo) {
@@ -149,10 +161,11 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
149 161
staticClass: 'dropdown-toggle',
150 162
class: this.toggleClasses,
151 163
props: {
164 +
tag: this.toggleTag,
152 165
variant: this.variant,
153 166
size: this.size,
154 -
disabled: this.disabled,
155 -
tag: this.toggleTag
167 +
block: this.block && !this.split,
168 +
disabled: this.disabled
156 169
},
157 170
attrs: {
158 171
id: this.safeId('_BV_toggle_'),
@@ -186,7 +199,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
186 199
return h(
187 200
'div',
188 201
{
189 -
staticClass: 'dropdown btn-group b-dropdown',
202 +
staticClass: 'dropdown b-dropdown',
190 203
class: this.dropdownClasses,
191 204
attrs: { id: this.safeId() }
192 205
},
@@ -247,6 +247,30 @@ describe('dropdown', () => {
247 247
wrapper.destroy()
248 248
})
249 249 250 +
it('should not have "btn-group" class when block is true', async () => {
251 +
const wrapper = mount(BDropdown, {
252 +
attachToDocument: true,
253 +
propsData: {
254 +
block: true
255 +
}
256 +
})
257 +
expect(wrapper.classes()).not.toContain('btn-group')
258 +
wrapper.destroy()
259 +
})
260 + 261 +
it('should have "btn-group" and "d-flex" classes when block and split are true', async () => {
262 +
const wrapper = mount(BDropdown, {
263 +
attachToDocument: true,
264 +
propsData: {
265 +
block: true,
266 +
split: true
267 +
}
268 +
})
269 +
expect(wrapper.classes()).toContain('btn-group')
270 +
expect(wrapper.classes()).toContain('d-flex')
271 +
wrapper.destroy()
272 +
})
273 + 250 274
it('should have "dropdown-toggle-no-caret" class when no-caret is true', async () => {
251 275
const wrapper = mount(BDropdown, {
252 276
attachToDocument: true,
@@ -67,6 +67,10 @@
67 67
"prop": "toggleClass",
68 68
"description": "CSS class (or classes) to add to the toggle button"
69 69
},
70 +
{
71 +
"prop": "block",
72 +
"description": "Renders a 100% width toggle button (expands to the width of it's parent container)"
73 +
},
70 74
{
71 75
"prop": "noCaret",
72 76
"description": "Hide the caret indicator on the toggle button"
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