Button Dropdown #
Component with a button that displays dropdown content when getting clicked. It inherits properties, provided by VaButton and VaDropdown components.
Examples #
Basic usage #
Just wrap your content with va-button-dropdown
component and it will become available only via click.
Split #
The split
prop allows you to split the button into two, with different purposes of using. One of them can be a link (you can set href for it via split-to
or split-href
props, which are analogues of the to
and href
attributes).
Colors #
The component can be colored via color
, gradient
and text-color
props.
Sizes #
You are able to set component's size via size
prop (small
, medium
or large
presets are available, px
and rem
values are also suitable).
buttonDropdown.examples.presets.title #
Disabled #
The component can be disabled via disabled
prop. For the split
state can be disabled both or only one button (via disableButton
and disableDropdown
props).
Icons #
You can set the dropdown icon and its color via icon
and icon-color
props. Also you are able to change icon's position from right to left side of the button via left-icon
boolean prop. If you want to remove icon at all, use the hide-icon
property. Opened-state icon can be changed using openedIcon
prop.
Click inside #
You are able to set up the dropdown to be closed or not after clicking on its content using the close-on-content-click
prop.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeClass |
| - | |
anchorSelector |
|
| |
append |
| - | |
ariaLabel |
|
| |
autoPlacement |
|
| |
backgroundOpacity |
|
| |
borderColor |
|
| |
closeOnAnchorClick |
|
| |
closeOnClickOutside |
|
| |
closeOnContentClick |
|
| |
color |
|
| |
cursor |
|
| |
disableButton |
|
| |
disabled |
|
| |
disableDropdown |
|
| |
exact |
| - | |
exactActiveClass |
| - | |
fontSizesConfig |
|
| |
gradient |
|
| |
hideIcon |
|
| |
hoverBehavior |
|
| |
hoverMaskColor |
|
| |
hoverOpacity |
|
| |
hoverOutTimeout |
|
| |
hoverOverTimeout |
|
| |
href |
| - | |
icon |
|
| |
iconColor |
|
| |
innerAnchorSelector |
|
| |
isContentHoverable |
|
| |
keepAnchorWidth |
|
| |
keyboardNavigation |
|
| |
label |
| - | |
leftIcon |
|
| |
loading |
|
| |
modelValue |
|
| |
offset |
|
| |
openedIcon |
|
| |
placement |
|
| |
plain |
|
| |
preset |
| - | |
pressedBehavior |
|
| |
pressedMaskColor |
|
| |
pressedOpacity |
|
| |
preventOverflow |
|
| |
readonly |
| - | |
replace |
| - | |
round |
|
| |
size |
|
| |
sizesConfig |
|
| |
split |
| - | |
splitHref |
|
| |
splitTo |
|
| |
stateful |
|
| |
stickToEdges |
|
| |
tag |
|
| |
target |
| - | |
teleport |
| - | |
textColor |
|
| |
textOpacity |
|
| |
to |
| - | |
trigger |
|
| |
type |
|
|
Events #
Name | Description |
---|---|
click | Emitted when user clicks on button.. The event argument is:
|
mainButtonClick | Emitted when user clicks on main button in split component.. The event argument is:
|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
Name | Description |
---|---|
default | Dropdown content slot. |
label | Content for dropdown button. |
Css Variables #
Name | Default Value |
---|---|
--va-button-dropdown-button-margin | 0 |