components
Olive Menu
v.1.0.0 | SaturnImport
1
import { OliveMenu } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the oliveMenu component by examining all its avalaible props.
Note that the oliveMenu component's default styling properties can be moderately adjusted through the ctv prop, in case the project do not need a full variant customization. This limited customization ensures a seamless balance between predefined aesthetic and your specific design requirements. Additionally, it's essential to highlight that Kubit always provided the option to full customized all the variants that your project needs.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Current variant of OliveMenu |
| onOpenClose | (open: boolean, event?: MouseEvent) => void | - | Function called when OliveMenu is closed or opened |
| trigger | OliveMenuTriggerType | - | Trigger button |
| screenReaderText | String | - | Value that It is read for screenReader when oliveMenu is opened |
| actionBottomSheetStructure | OliveMenuActionBottomSheetStructure | - | Configuration for ActionBottomSheet |
| popover | OliveMenuPopover | - | Configuration for Popover |
| sections | OliveMenuListOptions | - | Olive menu sections |
| onClick | (value) => void | - | Function called when user clicks on an option |
| selectedValue | String or Number | - | Actual value selected |
| onOptionClick | (value?: string or number) => void | - | Function called when an option is clicked |
| dataTestId | String | - | Id for testing |
| ctv | OliveMenuGlobalStylesType | - | Modify styles for the default version of the component |