A Vue.js multi-level popup menu, using a page like navigation inside the menu container.
Prop name | Description | Type | Default |
---|---|---|---|
idKey | Field name in the menu item data set that holds item identifier. | string | 'id' |
labelKey | Field name in the menu item data set that holds item label. | string | 'label' |
subtitleKey | Field name in the menu item data set that holds item subtitle. | string | 'subtitle' |
hintKey | Field name in the menu item data set that holds item tool tip. | string | 'hint' |
checkerKey | Field name in the menu item data set that tells whether the item has a checkbox attached. |
string | 'checker' |
checkedKey | Field name in the menu item data set that holds item's checkbox is checked. | string | 'checked' |
shortcutKey | Field name in the menu item data set that holds item keyboard shortcut. | string | 'shortcut' |
childrenKey | Field name in the menu item data set that holds sub-menu item. | string | 'children' |
addElementId | Whether to add element id attribute, using the idKey field. |
boolean | false |
Name | Description | Bindings |
---|---|---|
default | Item label | item: G8MenuItem |
subtitle | Item subtitle | item: G8MenuItem |
Event name | Type | Description |
---|---|---|
open | MouseEvent | The popup menu has been opened. |
close | G8MenuItem | The popup menu has been closed. |
click | G8MenuItemClicked | A menu item has been clicked. |
state-changed | G8MenuItem | A checkbox in the menu item has been checked or unchecked. |
select | G8MenuItem | A menu item has been selected. |
/**
* Menu item. Fields listed here serve default data structure. There can be
* arbitrary fields in the data set. Actual fields used in rendering can be
* customized using component properties such as `idKey`.
*/
export interface G8MenuItem {
/**
* Arbitrary field declaration, also enables accessing via index.
*/
[key: string]: unknown | undefined;
/**
* Arbitrary field declaration, also enables accessing via index.
*/
[key: number]: unknown | undefined;
/**
* Default menu item identifier.
*/
id?: string;
/**
* Default menu item label. `'---'` here denotes a separator item. Separator
* item will not close menu or trigger any event.
*/
label?: string;
/**
* Default menu item subtitle.
*/
subtitle?: string;
/**
* Default menu item tool tip (mouse hover).
*/
hint?: string;
/**
* Whether the item has a checkbox attached. Items with checkbox will not
* close the menu while clicked. However, the `click` event will be fired,
* followed by `state-changed` event.
*/
checker?: boolean;
/**
* Whether checkbox of the item has been checked.
*/
checked?: boolean;
/**
* Keyboard shortcut, must be on single character.
*/
shortcut?: string;
/**
* Sub-menu items
*/
children?: G8MenuItem[];
}
/**
* A menu item has been clicked.
*/
export class G8MenuItemClicked extends Event {
/**
* The item that was clicked.
*/
data?: G8MenuItem;
}