@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
153 lines (134 loc) • 3.79 kB
Markdown
dynamic-menu` element supports the creation of n-level deep cascading menus with
group labels and URL/action links and actions using a JSON object.
```typescript
// Trigger button launches top level menu. Must specify text and/or icon.
export interface IMenuTrigger {
id?: string; // Optional identifier
text?: string; // Text to display on button
icon?: string; // Optional icon
svgIcon?: string; // Optional svgIcon
iconClasses?: string[]; // Optional styling classes
}
// Menu items can serve one of four roles:
// - Submenu trigger (has children property)
// - URL link (has link property)
// - Action link (has action property)
// - Grouping label (has neither children, link or action properties)
export interface IMenuItem {
id?: string; // Optional identifier
text: string; // Display text
icon?: string; // Optional icon
svgIcon?: string; // Optional svgIcon
iconClasses?: string[]; // Optional styling classes
// If children provided, item is a submenu trigger
// Represents the contents of the submenu
children?: IMenuItem[];
// If link provided, item is a URL link
link?: string; // href (relative or fully qualified).
newTab?: boolean; // Indicates where URL should be displayed, current or new browser tab
// If action provided, item is an action link
// A click on this item will emit itemClicked event
action?: string;
}
// Click action event payload derived from IMenuItem
export interface ITdDynamicMenuLinkClickEvent {
text: string;
action: string;
}
```
- trigger: IMenuTrigger
- Definition for trigger button.
- items: IMenuItem[]
- One or more items to be displayed in menu.
- itemClicked: ITdDynamicMenuLinkClickEvent
- Emitted when an action link is pressed.
Import the **[CovalentDynamicMenuModule]** in your NgModule:
```typescript
import { CovalentDynamicMenuModule } from '@covalent/core/dynamic-menu';
@NgModule({
imports: [
CovalentDynamicMenuModule,
...
],
...
})
export class MyModule {}
```
Basic Example:
```typescript
trigger: IMenuTrigger = {
id: 'triggerbutton',
icon: 'list',
text: 'Trigger With Text And Icon',
};
items: IMenuItem[] = [
{ // Grouping label
id: 'platform',
text: 'Platform',
},
{ // Submenu trigger
id: 'covalentlinkstrigger',
text: 'Covalent Links',
svgIcon: 'assets:covalent',
children: [
{ // URL link
id: 'quickstartlink',
text: 'Quickstart',
icon: 'flash_on',
link: 'https://github.com/Teradata/covalent-quickstart',
newTab: true,
},
{ // URL link
id: 'electronlink',
text: 'Electron App',
icon: 'laptop_mac',
link: 'https://github.com/Teradata/covalent-electron',
newTab: true,
},
{ // URL link
id: 'datalink',
text: 'Covalent Data',
icon: 'aspect_ratio',
link: 'https://github.com/Teradata/covalent-data',
newTab: true,
},
],
},
{ // Grouping label
id: 'framework',
text: 'Framework',
},
{ // Submenu trigger
id: 'angularlink',
text: 'Angular Link',
svgIcon: 'assets:angular',
children: [
{ // URL link
text: 'Angular Homepage',
link: 'https://angular.io/',
newTab: true,
},
],
},
{ // Grouping label
id: 'actions',
text: 'Actions',
},
{ // Action link
id: 'actionlink',
text: 'Do Action',
icon: 'directions_run',
action: 'Go Run',
},
];
```
```html
<td-dynamic-menu [trigger]="trigger" [items]="items"></td-dynamic-menu>
```
`td-