components
Olive Menu
v.1.0.0 | Saturn
StorybookComponents
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | Action button in desktop or Icon button in mobile. Activates the options menu. |
2 Required | Maximun of 203 characters. |
| Name | Description |
|---|---|
1 Required | Displays the menu options. |
2 Required | Displays the menu options. |
3 | Shows the options of a section. |
| Name | Description |
|---|---|
1 Required | It will appear when action bottom sheet is open. |
2 Required | Displays the menu options. |
3 Required | Displays the menu options. |
4 | Shows the options of a section. |
States
Selected optionClicking on one of the menu options changes the status of the option to selected status and directs to the selected option.
Disabled optionDisplays a disabled option for the user.
Keyboard focusA keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
Behaviour
Desktop
Show menuWhen the user clicks on the action button, the options menu is displayed.
Hide menuThe menu is hidden by clicking on the close button or by clicking outside the action sheet area.
Number of optionsThe menu of options must contain a minimum of 2 options with no maximum number. The container will grow according to the available options.
Several linesThe row text may contain multiple lines if necessary.
Tablet and mobile
Hide menu
The menu is hidden by clicking on the close button or by clicking outside the action sheet area.
Layout
MarginBetween the option button and the menu the distance of 4px must be respected.