mirror of
https://github.com/vale981/Vulcan
synced 2025-03-10 04:26:41 -04:00
133 lines
No EOL
3 KiB
Markdown
133 lines
No EOL
3 KiB
Markdown
# Menu Component
|
|
|
|
This is a component for generating flexible, nestable menus. It can generates nested menus from a flat list with node `id`s and `parentId`s.
|
|
|
|
### Usage
|
|
|
|
Just include the `menuComponent` template while passing the necessary arguments:
|
|
|
|
```
|
|
{{> menuComponent menuItems=menuItems menuLabel="My Menu" menuClass="my-menu-class"}}
|
|
```
|
|
|
|
### Arguments
|
|
|
|
All arguments are optional unless specified otherwise.
|
|
|
|
##### `menuItems` (Array) [required]
|
|
|
|
An array containing the menu's contents (see below).
|
|
|
|
##### `menuName` (String)
|
|
|
|
The name of the menu. Used to set a `*name*-menu` CSS class on the menu.
|
|
|
|
##### `menuLabel` (String/Function)
|
|
|
|
The menu title label, or a function that returns a label.
|
|
|
|
##### `menuLabelTemplate` (String)
|
|
|
|
If provided, will replace the menu label with a custom template.
|
|
|
|
##### `menuClass` (String)
|
|
|
|
An optional CSS class given to the menu
|
|
|
|
##### `itemTemplate` (String)
|
|
|
|
A custom template used to display individual menu items (defaults to "defaultMenuItem")
|
|
|
|
### Menu Items Properties
|
|
|
|
Menu items can have the following properties:
|
|
|
|
##### `label` (String/Function)
|
|
|
|
The menu item's label, or a function that returns a label.
|
|
|
|
##### `description` (String/Function)
|
|
|
|
The menu item's description, or a function that returns a description.
|
|
|
|
##### `route` (String/Function)
|
|
|
|
Either the name of a route to which the menu item should point, or a function that returns a route.
|
|
|
|
If a route is provided, the class `item-active` will automatically be added to the menu item when its route is the currently active one.
|
|
|
|
##### `data` (Object)
|
|
|
|
The data context for the item.
|
|
|
|
##### `itemClass` (String)
|
|
|
|
The menu item's CSS class.
|
|
|
|
##### `template` (String)
|
|
|
|
An optional custom template. Overrides both the default template and the `itemTemplate` menu-level option.
|
|
|
|
##### `isHidden` (Function)
|
|
|
|
If this function returns `true`, the menu item will not be shown.
|
|
|
|
### Nested Menu Items Properties
|
|
|
|
Additionally, menu items take a few additional properties to generate nested menus.
|
|
|
|
##### `_id` (String)
|
|
|
|
A unique id used for arranging nodes in nested menus.
|
|
|
|
##### `parentId` (String)
|
|
|
|
The parent node's id.
|
|
|
|
##### `isExpanded` (Boolean)
|
|
|
|
Whether the item's sub-menu should be expanded
|
|
|
|
### The Menu Item Template
|
|
|
|
The menu item template is called with the following data context:
|
|
|
|
##### `menu` (Object)
|
|
|
|
A reference pointing back to the menu object.
|
|
|
|
##### `level` (Number)
|
|
|
|
The current nesting level.
|
|
|
|
##### `item` (Object)
|
|
|
|
The current item to display.
|
|
|
|
### Styling
|
|
|
|
Out of the box, the menu component accepts a few classes
|
|
|
|
#### No Class
|
|
|
|
If you pass no class to the menu, it will not receive any styling at all.
|
|
|
|
#### `menu-list`
|
|
|
|
A simple list. Serves as the base for the other styles.
|
|
|
|
#### `menu-dropdown`
|
|
|
|
A dropdown menu.
|
|
|
|
#### `menu-collapsible`
|
|
|
|
A collapsible menu.
|
|
|
|
### Events
|
|
|
|
The menu component includes a few events. Classes used for JS event targeting start with the `js-` prefix.
|
|
|
|
#### `click .js-menu-toggle`
|
|
|
|
Makes the current node's child menu expand and collapse. |