Menu
The ty-menu is an advanced custom menu component designed with extensibility and customization in mind. It supports flexible positioning relative to a target element, and works seamlessly with ty-menu-item components to provide a complete menu experience. The ty-menu component also supports standard menu behaviors while offering additional features like custom events.
The ty-menu-item is a robust custom component designed to represent individual menu items within a ty-menu. It supports standard menu item behaviors while offering additional features like custom icons and custom events.
Usage
To use ty-menu and ty-menu-item, include it in your HTML code and wrap your ty-menu-item elements within it. You can also specify a target-id and placement attribute on the ty-menu for customizing the positioning.
<div> <ty-button variant="icon" id="target-id"> <span class="material-icons">settings</span> </ty-button> <ty-menu target-id="target-id" placement="bottom-end"> <ty-menu-item value="3">Menu item 3</ty-menu-item> <ty-menu-item value="4">Menu item 4</ty-menu-item> </ty-menu> </div>
API
Properties
ty-menu
The ty-menu component accepts the following properties:
| Name | Description | Type | Default |
|---|---|---|---|
target-id | The id of the element the menu is positioned relative to | string | '' |
placement | The placement of the menu relative to the target element | string | 'bottom' |
ty-menu-item
The ty-menu-item component accepts the following properties:
| Name | Description | Type | Default |
|---|---|---|---|
value | The value of the menu item | string | '' |
size | Size | 'sm', 'md' | 'md' |
corner | Border radius when hover | 'none', 'xs', 'sm' | 'none' |
active | Set active state | boolean | false |
Events
ty-menu
| Name | Description | Detail |
|---|---|---|
ty-change | Fires when a menu item is selected | { value: string } |
ty-menu-item
| Name | Description | Detail |
|---|---|---|
ty-click | Fires when the menu item is clicked | { value: string } |
The ty-change event on ty-menu provides a convenient way to listen for selections within the menu, whereas the ty-click event on ty-menu-item provides a way to listen for clicks on individual menu items.