Dropdown
In progress
Aria
RTL
Dropdowns is a custom select component that allows users to make single or multiple selections.
An option that's been selected can represent a corresponding value in forms or be used to filter/sort content.
Anatomy
<Dropdown>
<Dropdown.Options>
<Dropdown.Option>...</Dropdown.Option>
<Dropdown.Option>...</Dropdown.Option>
<Dropdown.Option>...</Dropdown.Option>
</Dropdown.Options>
<Dropdown.Trigger>...</Dropdown.Trigger>
</Dropdown>
Default
Trigger elements
Option layouts
Positions
Sizes
Datepicker
Responsive dropdown
Dropdown props
Component for rendering dropdown info, mostly lists
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | Yes | - | The id of the live component (required by LiveView for stateful components). |
| value | any | No | - | Value(s) of the options to be marked as selected |
| on_trigger | event | No | - | Event fired when trigger is clicked |
| on_close | event | No | - | Event fired to close Dropdown.BottomOptions |
| is_open | boolean | No | - | Put true here if you want dropdown to be shown by default |
| class | css_class | No | - | Addictional classes to be added to a dropdown |
| testid | string | No | - | Data-testid attribute for HTML tag |
| hook | string | No | - | Attribute phx-hook. Used for dependant components |
| trigger | slot | Yes | - | Slot for triggering the open/closing state |
| default | slot | No | - | Content to be showable |
| backdrop | slot | No | - | Backdrop of Dropdown as BottomSheet on small screens, see Dropdown.Backdrop |
Dropdown.Options props
Options list for the Dropdown component
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for div |
| value | any | No | - | Value of the selected option(s) |
| on_change | event | No | - | On option click event, in most cases got from context |
| is_open | boolean | No | - | If the optionlist is open, got from context |
| size | sm | md | lg | No | "md" | Size of the options |
| class | css_class | No | - | Additional CSS classes for the div |
| position | top-start | top | top-end | bottom-start | bottom | bottom-end | right-start | right | right-end | left-start | left | left-end | No | - | Specifies the position of the dropdown |
| titles | list | No | [] | List of the options. Used when no |
| option_module | atom | No | Moon.Design.Dropdown.Option | - |
| testid | string | No | - | Data-testid attribute for div |
| option | slot | No | - | - |
| default | slot | No | - | - |
Dropdown.Trigger props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | - | Title to be shown when no defaul slot given |
| is_open | boolean | No | - | If the trigger is open. Should be taken from context |
| on_click | event | No | - | Event that fired when trigger is clicked |
| testid | string | No | - | Data-testid attribute for HTML tag |
| default | slot | No | - | Inner content of the component |
Dropdown.Option props
Single oprion for the dropdown component. Renders as a button
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for buttons |
| testid | string | No | - | Data-testid attribute for button |
| title | string | No | - | Title to be shown when no default slot is given |
| class | css_class | No | - | Additional CSS classes for the button tag |
| disabled | boolean | No | - | If the button is disabled |
| on_click | event | No | - | On click event, in most cases got from context |
| value | any | No | - | Value of the option, in most cases got from context |
| is_selected | boolean | No | - | If the option is selected, in most cases got from context |
| size | sm | md | lg | No | - | Text size & paddings for the option. Is set by Dropdown.Options in most cases |
| default | slot | No | - | Inner content of the option |
Dropdown.BottomOptions props
Options list for the Dropdown component
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for div |
| value | any | No | - | Value of the selected option(s) |
| on_change | event | No | - | On option click event, in most cases got from context |
| on_close | event | No | - | Click event, in most cases got from context |
| is_open | boolean | No | - | If the optionlist is open, got from context |
| size | sm | md | lg | No | "md" | Size of the options |
| class | css_class | No | - | Additional CSS classes for the div |
| titles | list | No | [] | List of the options. Used when no |
| option_module | atom | No | Moon.Design.Dropdown.Option | - |
| testid | string | No | - | Data-testid attribute for div |
| option | slot | No | - | - |
| default | slot | No | - | - |
Dropdown.Backdrop props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for html tag |
| testid | string | No | - | Data-testid attribute for html tag |
| class | css_class | No | - | Additional CSS classes for the html tag |
| is_open | boolean | No | - | If the optionlist is open, got from context |