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 |
---|---|---|---|
active-class | Applied when the link is active. More info here. |
| - |
anchor-selector | Anchor CSS selector instead of passing slot |
|
|
append | When set, always appends the relative path to the current path. More info here. |
| - |
aria-label | The aria-label of the component |
|
|
auto-placement | If dropdown doesn't fit viewport, it will be placed automatically to fit viewport |
|
|
background-opacity | Sets up button background opacity. |
|
|
border-color | Color CSS style |
|
|
close-on-anchor-click | Dropdown will be closed when anchor is clicked |
|
|
close-on-click-outside | Dropdown will be closed when clicked outside dropdown content and anchor |
|
|
close-on-content-click | Sets dropdown content on click behavior. |
|
|
color | Color of the component (theme string or |
|
|
cursor | Dropdown will be rendered relative to cursor position |
|
|
disable-button | Disables the button. |
|
|
disable-dropdown | Disables the dropdown menu. |
|
|
disabled | Applies |
|
|
exact | Exactly match the link. Without this, '/' will match every route. More info here. |
| - |
exact-active-class | Applied when the link is active with exact match. More info here. |
| - |
font-sizes-config | Provide a set of sizes for fonts as a global component specific setting. |
|
|
gradient | Makes the button background color a gradient (only if |
|
|
hide-icon | Hide icon (when |
|
|
hover-behavior | Behavior of the button, when it's being hovered. Can be |
|
|
hover-mask-color | Mask color for |
|
|
hover-opacity | Opacity value for |
|
|
hover-out-timeout | Time in |
|
|
hover-over-timeout | Time in |
|
|
href | Designates the component as anchor and applies the href attribute. More info here. |
| - |
icon | Applies a custom icon in the dropdown section. |
|
|
icon-color | Sets an icon color. |
|
|
inner-anchor-selector | Anchor CSS selector inside passed slot |
|
|
is-content-hoverable | If true, dropdown content will be hoverable |
|
|
keep-anchor-width | Keeps anchor position the same. |
|
|
keyboard-navigation | Enables keyboard navigation for the component. |
|
|
label | Same as native |
| - |
left-icon | Sets the icon position to the left. |
|
|
loading | Indicates that something is loading (spinner icon). |
|
|
model-value | Sets a dropdown state. |
|
|
offset | Sets the distance between dropdown and anchor. |
|
|
opened-icon | Applies a custom icon in the dropdown section when the dropdown is opened. |
|
|
placement | Sets the placement of the dropdown content. More about placements |
|
|
plain | Applies |
|
|
preset | Named preset combination of component props. |
| - |
pressed-behavior | Behavior of the button, when it's being pressed. Can be |
|
|
pressed-mask-color | Mask color for |
|
|
pressed-opacity | Opacity value for |
|
|
prevent-overflow | If true, dropdown will be teleported to target ignoring |
|
|
readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
| - |
replace | When set, calls |
| - |
round | Adds rounded corners (or make a button fully rounded if only icon is passed). |
|
|
size | Specify size for component. |
|
|
sizes-config | Provide a set of sizes as a global component specific setting. |
|
|
split | Divides the button into two parts. This is useful when you have main action (button) and a number of secondary actions (icon + dropdown). |
| - |
split-href | Sets a native navigation link in a split component. |
|
|
split-to | Sets a vue navigation link in a split component. |
|
|
stateful | Add possibility to work with component without setting |
|
|
stick-to-edges | Dropdown will not be rendered outside of viewport. It will be moved in opposite direction. |
|
|
tag | Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases ( |
|
|
target | Navigation target, More info here. |
| - |
teleport | Element where content will be rendered |
| - |
text-color | Text color (theme string or HEX string). |
|
|
text-opacity | Sets button text opacity. |
|
|
to | The target route of the link. More info here. |
| - |
trigger | Action that will triggered when open and close dropdown. |
|
|
type | Will be used as value for html |
|
|
Events #
Name | Description |
---|---|
click | Emitted when user clicks on button.. The event argument is:
|
main-button-click | Emitted when user clicks on main button in split component. |
mainButtonClick | Emitted when user clicks on main button in split component.. The event argument is:
|
update-model-value | 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 |