File

src/app/component/navigation/nav-item/nav-item.component.ts

Metadata

encapsulation	`ViewEncapsulation.None`
selector	`stbui-nav-item`
styleUrls	`./nav-item.component.scss`
templateUrl	`./nav-item.component.html`

Index

Inputs

item

Inputs

item
Type : `any`
Defined in src/app/component/navigation/nav-item/nav-item.component.ts:11

import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'stbui-nav-item',
  templateUrl: './nav-item.component.html',
  styleUrls: ['./nav-item.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class NavItemComponent {
  @Input()
  item: any;
}

<a class="navigation-link" *ngIf="item.url" [routerLink]="item.url" routerLinkActive="stbui-background-blue" matRipple>
  <mat-icon class="navigation-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
  <span class="navigation-link-title">{{item.title}}</span>
  <span class="navigation-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg, 'color': item.badge.fg}">{{item.badge.title}}</span>
</a>

./nav-item.component.scss

.navigation-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  text-decoration: none;
  padding: 0 24px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  color: currentColor;

  &.active {
    background: #2196f3;
    color: #fff;
  }

  &-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 16px;
  }
  &-title {
    flex: 1;
    white-space: nowrap;
  }
  &-badge {
    display: flex;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
    margin-left: 8px;
    box-sizing: border-box;
  }
}

.navigation-children {
  .navigation-link {
    padding-left: 56px;
  }
}

Legend

Html element

Component

Html element with directive

File

Metadata

Index

Inputs

Inputs

result-matching ""

No results matching ""