File

projects/tl-elements/src/lib/tl-nav-list/tl-nav-list.component.ts

Description

The TamuNavList Component represents a navigation list. Elements within this list must be of type : wvr-nav-li elements and can be either links of action elements.

Extends

TamuAbstractBaseComponent

Metadata

Index

Properties
Inputs
HostBindings

Constructor

constructor(injector: Injector)
Parameters :
Name Type Optional
injector Injector No

Inputs

aligned
Type : Alignment
Default value : Alignment.LEFT

The aligned property describing the positioning of the list elements.

vertical
Type : boolean
Default value : false

This allows the display of the list horizontally.

inheritFontStyle
Type : "true" | "false"

HostBindings

style.--tl-font-family-sans-serif
Type : string
Default value : 'var(--tl-default-font-family-sans-serif)'

Allows for the override of the --tl-font-family-sans-serif css variable.

style.--tl-font-size
Type : string
Default value : 'var(--tl-default-font-size)'

Allows for the override of the --tl-default-font-size css variable.

Properties

_fontFamily
Type : string
Default value : 'var(--tl-default-font-family-sans-serif)'
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')

Allows for the override of the --tl-font-family-sans-serif css variable.

_fontSize
Type : string
Default value : 'var(--tl-default-font-size)'
Decorators :
@HostBinding('style.--tl-font-size')

Allows for the override of the --tl-default-font-size css variable.

import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
import { Alignment } from '@wvr/elements';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';

/**
 * The TamuNavList Component represents a navigation list.
 * Elements within this list must be of type : wvr-nav-li elements and can be either links of action elements.
 */
@Component({
  selector: 'tl-nav-list-component',
  templateUrl: './tl-nav-list.component.html',
  styleUrls: ['./tl-nav-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class TlNavListComponent extends TamuAbstractBaseComponent {

  /** The aligned property describing the positioning of the list elements. */
  @Input() aligned: Alignment = Alignment.LEFT;

  /** This allows the display of the list horizontally. */
  @Input() vertical = false;

  // tslint:disable-next-line:unnecessary-constructor
  constructor(injector: Injector) {
    super(injector);
  }

}
<wvr-nav-list-component [aligned]="aligned" [vertical]="vertical">
  <template nav-list-items>
    <ng-content select="wvre-nav-li, tl-nav-li" ngProjectAs="wvre-nav-li"></ng-content>
  </template>
</wvr-nav-list-component>

./tl-nav-list.component.scss

@import "../shared/styles/tl-variables.scss";
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""