Permalink
Browse files

feat(dropdowns): Various optimizations for dropdown components (#627)

* [dropdown] Deprecate slot text in favour of slot button-content

* [nav-item-dropdown] Deprecate slot text in favour of slot button-content

* [dropdown mixin] Consolidate props & methods

* [nav-item-dropdown] Migrate data, methods, clickout to mixin

* [button-group-dropdown] Delete

* [button-group] Remove justify prop s it doesn't work

* [rollup-config.js] Add Object Assign support to Buble

* [rollup.extra.config.js] Add object assign support to Buble

* [dropdown mixin] switch ot object spread

Plus use better visibility checking for keyboard navigation

* [dropdown] documentation update

* [nav-item-dropdown] documentation update

* [navbar] Docs update dropdown button-text slot

* [button-group] Docs update

* [button-toolbar] Docs update
  • Loading branch information...
tmorehouse committed Jul 4, 2017
1 parent 18e8547 commit 56d29b0aa4270e6a9ccbe86278b7edd413970203
@@ -34,7 +34,7 @@ module.exports = {
}),
resolve({external: ['vue']}),
commonjs(),
buble(),
buble({objectAssign: 'Object.assign'}),
uglify({}, minify)
],
globals: {
@@ -34,7 +34,7 @@ module.exports = {
}),
resolve({external: ['vue']}),
commonjs(),
buble(),
buble({objectAssign: 'Object.assign'}),
uglify({}, minify)
],
globals: {
@@ -1,33 +1,86 @@
# Button group
> Group a series of buttons together on a single line with `b-button group`.
> Group a series of buttons together on a single line with `<b-button group>`.
**Example 1:** Default, Small, and Large button groups
```html
<div class="row">
<div class="col">
<b-button-group vertical>
<b-button variant="success">Top</b-button>
<b-button variant="info">Middle</b-button>
<b-button variant="primary">Bottom</b-button>
</b-button-group>
</div>
<div class="col">
<b-button-group>
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-button>Button 3</b-button>
</b-button-group>
<br>
<br>
<b-button-group size="sm">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
<div class="col">
<b-button-group size="sm">
</b-button-group>
<br>
<br>
<b-button-group size="lg">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</b-button-group>
</div>
<!-- button-group-1.vue -->
```
**Example 2:** Default button group with contextual variants
```html
<div>
<b-button-group>
<b-button variant="success">Success</b-button>
<b-button variant="info">Info</b-button>
<b-button variant="warning">Warning</b-button>
<b-button variant="primary">Primary</b-button>
<b-button variant="danger">Danger</b-button>
<b-button variant="link">Link</b-button>
</b-button-group>
</div>
<!-- button-group-2.vue -->
```
**Example 3:** button group with dropdown menus
```html
<div>
<b-button-group>
<b-button>Button 1</b-button>
<b-button>Button 2</b-button>
<b-dropdown right text="Menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button>Button 3</b-button>
<b-dropdown right split text="Split Menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div>
<!-- button-group-3.vue -->
```
**Example 4:** Vertical button group
```html
<div>
<b-button-group vertical>
<b-button>Top</b-button>
<b-button>Middle</b-button>
<b-button>Bottom</b-button>
</b-button-group>
</div>
<!-- button-group.vue -->
<!-- button-group-4.vue -->
```
### Sizing
@@ -38,12 +91,12 @@ There is no need to specify the size on the individual buttons.
Make a set of buttons appear vertically stacked rather than horizontally by setting
the `vertical` prop. Split button dropdowns are not supported here.
### Justification
Make horizontal `b-button-group` span the entire width of its prent container by
setting the `justify` prop. This setting has no effect when `vertical` is set.
### Dropdown menu support
Add [`<b-dropdown>`](./dropdown) menus directly inside your `<b-button-group>`. Note
that split dropdown menus are not supported when prop `vertical` is set.
### Alias
`b-button` group can also be used by its shorter alias `b-btn-group`.
`<b-button-group>` can also be used by its shorter alias `<b-btn-group>`.
### See also
Also check out the [`<b-button-toolabr>`](./button-toolbar) component for generating
@@ -2,4 +2,4 @@
"title": "Button group",
"component": "bButtonGroup",
"jsfiddle": "jccx27as"
}
}
@@ -5,76 +5,89 @@
**Example 1:** with button groups & Keyboard navigation
```html
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1">
<b-btn>&laquo;</b-btn>
<b-btn>&lsaquo;</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>Edit</b-btn>
<b-btn>Undo</b-btn>
<b-btn>Redo</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>&rsaquo;</b-btn>
<b-btn>&raquo;</b-btn>
</b-button-group>
</b-button-toolbar>
<!-- button-toolbar1.vue -->
<div>
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1">
<b-btn>&laquo;</b-btn>
<b-btn>&lsaquo;</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>Edit</b-btn>
<b-btn>Undo</b-btn>
<b-btn>Redo</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>&rsaquo;</b-btn>
<b-btn>&raquo;</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<!-- button-toolbar-1.vue -->
```
**Example 2:** with mixture of small button groups and small input groups
```html
<b-button-toolbar aria-label="Toolbar with button groups and input groups">
<b-button-group size="sm" class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
</b-button-group>
<b-input-group size="sm" class="w-25 mx-1" left="$" right=".00">
<b-form-input value="123" class="text-right"></b-form-input>
</b-input-group>
<b-input-group size="sm" class="w-25 mx-1" left="Size">
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
</b-input-group>
<b-button-group size="sm" class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
<!-- button-toolbar2.vue -->
<div>
<b-button-toolbar aria-label="Toolbar with button groups and input groups">
<b-button-group size="sm" class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
</b-button-group>
<b-input-group size="sm" class="w-25 mx-1" left="$" right=".00">
<b-form-input value="123" class="text-right"></b-form-input>
</b-input-group>
<b-input-group size="sm" class="w-25 mx-1" left="Size">
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
</b-input-group>
<b-button-group size="sm" class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<!-- button-toolbar-2.vue -->
```
### Usage
**Example 3:** with button groups and dropdown menu
```html
<b-button-toolbar aria-label="My Toolbar">
<b-button-group size="sm" class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
</b-button-group>
<b-input-group size="sm" class="w-25 mx-1" left="$" right=".00">
<b-form-input value="123" class="text-right"></b-form-input>
</b-input-group>
<b-button-group size="sm" class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
<div>
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
<b-button-group class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
<b-btn>Undo</b-btn>
</b-button-group>
<b-dropdown class="mx-1" right text="menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button-group class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<!-- button-toolbar-3.vue -->
```
Feel free to mix input groups with button groups in your toolbars.
### Usage
Feel free to mix input groups and dropdowns with button groups in your toolbars.
Similar to the example above, you’ll likely need some utility classes
though to space things properly.
### Sizing
Note, if you want smaller or larger buttons or controls, set the `size`
prop on the `<b-button-group>`s and `<b-input-group>`s.
prop directly on the `<b-button-group>`, `<b-input-group>`, and `<b-dropdown>` components.
### Justify
Make the toolbar span the maximum available width, by increasing spacing between the
button-groups and input-groups, by setting the prop `justify`.
button groups, input groups and dropdowns, by setting the prop `justify`.
### Keyboard Navigation
Enable optional keyboard navigation by setting the prop `key-nav`.
@@ -88,8 +101,12 @@ Enable optional keyboard navigation by setting the prop `key-nav`.
| <kbd>TAB</kbd> | Move to the next control on the page
| <kbd>SHIFT</kbd>+<kbd>TAB</kbd> | Move to the previous control on the page
**Caution:** If you have textual inputs in your toolbar, leave keyboard navigation off,
as it is not possble to use key presses to jump out of a text (or test-like) input.
**Caution:** If you have text or text-like inputs in your toolbar, leave keyboard navigation off,
as it is not possble to use key presses to jump out of a text (or test-like) inputs.
### Alias
`<b-button-toolbar>` can also be used via the shorthand alias `<b-btn-toolbar>`
### See Also
- [`<b-button-group>`](./button-group)
- [`<b-dropdown>`](./dropdown)
Oops, something went wrong.

0 comments on commit 56d29b0

Please sign in to comment.