Code Documentation for ftu-ui-components
  1. Components
  2. NavigationButtonComponent

File

/home/workflows/workspace/libs/design-system/buttons/navigation-button/src/lib/navigation-button.component.ts

Description

Navigation button component for global navigation Used in mega menus and mobile menu overlays

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector hra-navigation-button
imports HraCommonModule MatRippleModule
templateUrl ./navigation-button.component.html
styleUrl ./navigation-button.component.scss

Index

Inputs

Inputs

indented
Default value : false, { transform: booleanAttribute }
Defined in /home/workflows/workspace/libs/design-system/buttons/navigation-button/src/lib/navigation-button.component.ts:30

Whether to show indent instead
link
Type : string
Required :  true
Defined in /home/workflows/workspace/libs/design-system/buttons/navigation-button/src/lib/navigation-button.component.ts:24

Link URL for the navigation item
variant
Type : NavigationButtonVariant
Default value : 'basic'
Defined in /home/workflows/workspace/libs/design-system/buttons/navigation-button/src/lib/navigation-button.component.ts:27

Variant type (cta or menu-item)

 
import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';
import { HraCommonModule } from '@hra-ui/common';

/** Type for the navigation button variant */
export type NavigationButtonVariant = 'cta' | 'basic';

/**
 * Navigation button component for global navigation
 * Used in mega menus and mobile menu overlays
 */
@Component({
  selector: 'hra-navigation-button',
  imports: [HraCommonModule, MatRippleModule],
  templateUrl: './navigation-button.component.html',
  styleUrl: './navigation-button.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': '"hra-navigation-button-" + variant()',
  },
})
export class NavigationButtonComponent {
  /** Link URL for the navigation item */
  readonly link = input.required<string>();

  /** Variant type (cta or menu-item) */
  readonly variant = input<NavigationButtonVariant>('basic');

  /** Whether to show indent instead */
  readonly indented = input(false, { transform: booleanAttribute });
}

<a matRipple hraFeature="navigation-button" hraClickEvent [attr.href]="link()">
  <div class="content">
    @if (indented()) {
      <div class="indent"></div>
    } @else {
      <!-- Leading icon -->
      <ng-content select="[hraNavigationIcon='leading']" />
    }

    <div class="text-container">
      <!-- Tagline -->
      <ng-content select="[hraNavigationButtonTagline]" />

      <!-- Description -->
      <ng-content select="[hraNavigationButtonDescription]" />
    </div>

    <!-- Trailing icon -->
    <ng-content select="[hraNavigationIcon]:not([hraNavigationIcon='leading'])" />
  </div>
</a>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""