| title |
Dropdown |
| pre |
|
| npm |
@featherds/dropdown |
| description |
A small container for menus and options. |
| lang |
en-US |
| tags |
|
| menu |
components |
| Name |
Description |
Type |
Required |
Default |
| modelValue |
when true Dropdown will be open |
Boolean |
false |
- |
| cover |
when true Dropdown will cover triggering element |
Boolean |
false |
- |
| right |
when true Dropdown will try to align to the right |
Boolean |
false |
- |
| standard |
when true Dropdown appear in the standard width |
Boolean |
false |
- |
- update:modelValue - emitted when modelValue updates
- default - slot to put Dropdown items in
- trigger - slot to put trigger in, typically a button. This slot is scoped, it provides attrs and on which should be passed to v-bind and v-on respectively. See the examples.
- feather-dropdown-container - the root container
- feather-dropdown-container-dropdown - the container div for the dropdown contents, note this uses our layering system and will be present as an immediate child of the body tag
You can configure the Dropdown menu height by setting the height style for .feather-dropdown. Out of the box the height is configured to allow up to 6 rows before scrolling. We have provided a mixin for you to easily configure the height of the menu.
The following example allows 10 items to be displayed before scrolling.
@use "@featherds/dropdown/scss/mixins" as dropdown-mixins;
.my-component :deep(.feather-dropdown) {
@include dropdown-mixins.dropdown-menu-height(10);
}
| Name |
Description |
Type |
Required |
Default |
| disabled |
when true dropdown item will be disabled |
Boolean |
false |
- |
- update:modelValue - emitted when modelValue updates
- default - slot to put text in
- icon - slot to put icon in