@talenra/components documentation
  1. Components
  2. MenuComponent

File

menu/src/menu/menu.component.ts

Description

Menu is a container for a list of menu items.

There are three different menu items

  • MenuLink: A clickable menu item that navigates to a different page and/or triggers a given callback
  • MenuActionItem: A non-clickable menu item that can be used as container for action items
  • MenuSeparator: A horizontal line that separates menu items
Example :
<talenra-menu>
  <talenra-menu-link routerLink="/home">Home</talenra-menu-link>
  <talenra-menu-link routerLink="/about">About</talenra-menu-link>
  <talenra-menu-link routerLink="/contact">Contact</talenra-menu-link>
  <talenra-menu-separator />
  <talenra-menu-action-item>
    <talenra-icon name="flag-circle" (click)="setPriority('high')" />
    <talenra-icon name="flag-circle" (click)="setPriority('medium')" />
    <talenra-icon name="flag-circle" (click)="setPriority('low')" />
  </talenra-menu-action-item>
</talenra-menu>

Import

Example :
import { MenuComponent } from '@talenra/components/menu';

See MenuLinkComponent See MenuActionItemComponent See MenuSeparatorComponent See MenuAnchorDirective

../../../#/menu

Implements

AfterViewInit AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives CdkMenu
host {
}
selector talenra-menu
imports ScrollContainerComponent NgTemplateOutlet
templateUrl ./menu.component.html
styleUrl ./menu.component.scss

Index

Inputs

Inputs

useScroll
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Developer Preview: Determines whether the menu should use vertical scrolling when its content exceeds the viewport height.

Example :
<talenra-menu useScroll>
  @for (item of manyItems; track item) {
    <talenra-menu-link [label]="item" />
  }
</talenra-menu>

results matching ""

    No results matching ""