Skip to content

Commit b826f84

Browse files
mrholekmrholek
committed
feat(CDropdownToggle): add splitLabel prop for customizable screen reader text
1 parent 0330814 commit b826f84

File tree

4 files changed

+29
-19
lines changed

4 files changed

+29
-19
lines changed

‎packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@ const CDropdownToggle = defineComponent({
7474
* Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
7575
*/
7676
split: Boolean,
77+
/**
78+
* Screen reader label for split button dropdown toggle.
79+
*
80+
* @since 5.7.0
81+
*/
82+
splitLabel: {
83+
type: String,
84+
default: 'Toggle Dropdown',
85+
},
7786
/**
7887
* Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
7988
*
@@ -194,7 +203,7 @@ const CDropdownToggle = defineComponent({
194203
},
195204
() =>
196205
props.split
197-
? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
206+
? h('span', { class: 'visually-hidden' }, props.splitLabel)
198207
: slots.default && slots.default(),
199208
)
200209
},

‎packages/docs/api/dropdown/CDropdown.api.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
1111
| Prop name | Description | Type | Values | Default |
1212
| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
1313
| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - |
14-
| **auto-close** | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true |
14+
| **auto-close** | Configure the auto close behavior of the dropdown:<br>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean \| 'inside' \| 'outside' | - | true |
1515
| **container** <br><div class="badge bg-primary">5.0.0+</div> | Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
1616
| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - |
1717
| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - |
1818
| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
1919
| **offset** <br><div class="badge bg-primary">4.9.0+</div> | Offset of the dropdown menu relative to its target. | array | - | [0, 2] |
2020
| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' |
2121
| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true |
22-
| **reference** <br><div class="badge bg-primary">5.7.0+</div> | Sets the reference element for positioning the React Dropdown Menu.<br>- `toggle` - The React Dropdown Toggle button (default).<br>- `parent` - The React Dropdown wrapper element.<br>- `HTMLElement` - A custom HTML element.<br>- `Ref` - A custom reference element. | 'parent' \| 'toggle' \| HTMLElement \| Ref<HTMLElement \| null> | - | 'toggle' |
22+
| **reference** <br><div class="badge bg-primary">5.7.0+</div> | Sets the reference element for positioning the Vue Dropdown Menu.<br>- `toggle` - The Vue Dropdown Toggle button (default).<br>- `parent` - The Vue Dropdown wrapper element.<br>- `HTMLElement` - A custom HTML element.<br>- `Ref` - A custom reference element. | 'parent' \| 'toggle' \| HTMLElement \| Ref<HTMLElement \| null> | - | 'toggle' |
2323
| **teleport** <br><div class="badge bg-primary">5.0.0+</div> | Generates dropdown menu using Teleport. | boolean | - | false |
2424
| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' |
2525
| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' |

0 commit comments

Comments
 (0)