Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb826f84

Browse files
committed
feat(CDropdownToggle): add splitLabel prop for customizable screen reader text
1 parent0330814 commitb826f84

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><divclass="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><divclass="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><divclass="badge bg-primary">5.7.0+</div>| Sets the reference element for positioning theReact Dropdown Menu.<br>-`toggle` - TheReact Dropdown Toggle button (default).<br>-`parent` - TheReact 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><divclass="badge bg-primary">5.7.0+</div>| Sets the reference element for positioning theVue Dropdown Menu.<br>-`toggle` - TheVue Dropdown Toggle button (default).<br>-`parent` - TheVue 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><divclass="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)
[8]ページ先頭
©2009-2025 Movatter.jp