import { Component } from '@angular/core';
import { WrTab, WrTabs } from 'ngwr/tabs';
@Component({ imports: [WrTab, WrTabs] })
export class MyComponent {}Tabs
Switch between panels, or between routes.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Content tabs
Bind [(active)] to a tab key.
<wr-tabs [(active)]="key">
<wr-tab key="overview" title="Overview">Overview content…</wr-tab>
<wr-tab key="details" title="Details">Details content…</wr-tab>
<wr-tab key="logs" title="Logs">Logs content…</wr-tab>
</wr-tabs>Router tabs
Give tabs a routerLink and add wrTabsRouting from ngwr/tabs/router, or the strip throws. Put a <router-outlet> below.
<!-- imports: [WrTabs, WrTab, WrTabsRouting] from 'ngwr/tabs' + 'ngwr/tabs/router' -->
<wr-tabs wrTabsRouting>
<wr-tab title="Overview" routerLink="overview" />
<wr-tab title="Details" routerLink="details" />
<wr-tab title="Logs" routerLink="logs" />
</wr-tabs>
<router-outlet />Disabled tab
<wr-tab title="WIP" disabled>…</wr-tab>Router adapter — template reference
#routing="wrTabsRouting" gives the template the adapter, for example href().
<wr-tabs wrTabsRouting #routing="wrTabsRouting">
<wr-tab title="Overview" routerLink="overview" />
<wr-tab title="Details" routerLink="details" />
</wr-tabs>
<!-- Anywhere else in the same template -->
<a [href]="routing.href('overview')">Permalink to the first tab</a>Tabs API
| Name | Description | Type | Default |
|---|---|---|---|
active | Active tab key. Two-way bindable. | string | null | null |
size | Visual size variant. | 'sm' | 'md' | 'lg' | 'md' |
Tab API
| Name | Description | Type | Default |
|---|---|---|---|
titlerequired | Visible label. | string | — |
key | Stable id. | string | auto |
routerLink | Makes the tab a link; the strip renders no panel. | string | readonly string[] | null | null |
disabled | Disable the tab. | boolean | false |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/tabs's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-tabs-border | var(--wr-border-base) | .wr-tabs |
--wr-tabs-color | var(--wr-color-on-surface-muted) | .wr-tabs |
--wr-tabs-color-active | var(--wr-color-primary-ink) | .wr-tabs |
--wr-tabs-color-hover | var(--wr-color-on-surface) | .wr-tabs |
--wr-tabs-fade | 1.5rem | .wr-tabs__strip |
--wr-tabs-fade-axis | to right | .wr-tabs__strip +1 variant override |
--wr-tabs-fade-end | 0px | .wr-tabs__strip +1 variant override |
--wr-tabs-fade-start | 0px | .wr-tabs__strip +1 variant override |
--wr-tabs-font-family | var(--wr-font-family-base) | .wr-tabs |
--wr-tabs-font-size | var(--wr-control-font-size-md) | .wr-tabs +2 variant overrides |
--wr-tabs-font-weight | var(--wr-font-weight-medium) | .wr-tabs |
--wr-tabs-indicator | var(--wr-color-primary) | .wr-tabs |
--wr-tabs-line-height | var(--wr-control-line-height-md) | .wr-tabs +2 variant overrides |
--wr-tabs-padding-x | var(--wr-space-lg) | .wr-tabs +2 variant overrides |
--wr-tabs-padding-y | var(--wr-space-md) | .wr-tabs +2 variant overrides |
--wr-tabs-panel-padding-top | var(--wr-space-lg) | .wr-tabs |
--wr-tabs-strip-gap | var(--wr-space-xs) | .wr-tabs |
Dependencies
| Add-on | ngwr/tabs/router(needs @angular/router) |
|---|