Tabs component

The component <day-tabs> and <day-tab> is a container for tabbed navigation, allowing users to switch between different views or content sections.

Import

import { DAYTabsComponent } and { DAYTabComponent } from '@dayerlin-bustamante/tabs';

Selectors

Tabs: day-tabs

Tab: day-tab

Installation and Usage

npm install @dayerlin-bustamante/tabs

import { DAYTabsComponent, DAYTabComponent } from '@dayerlin-bustamante/tabs';

<day-tabs>
    <day-tab [active]="true" [tabTmpl]="content">Tab 1</day-tab>
</day-tabs>

Inputs

DAYTabsComponent

Name	Description	Default
type: <'toggle' \| 'tabular'>	Defines the visual style of the tabs. "toggle" renders them as switch-like buttons, while "tabular" displays them as traditional tab headers.	'toggle'

DAYTabComponent

Name	Description	Default
tabTmpl: TemplateRef<any> \| null	Custom template to render as the tab content.	null
link: string \| null	Optional router path. If provided, the tab behaves as a router link.	null
active: boolean	Indicates whether the tab is initially active.	false
disabled: boolean	Disables the tab, making it non-selectable and non-interactive.	false
isActive: linkedSignal<boolean>	Links to the active state value from the input active().	this.active()

Outputs

Not included

Computes and internal events

Name	Description	Default
active: DAYTabComponent \| undefined	Computed property that returns the currently active tab based on internal state.	undefined
setActiveLink(tab: DAYTabComponent)	Sets the given tab as active and deactivates all others. Typically called from a tab instance.	—
isActive: linkedSignal<boolean>	Linked signal that reflects the active state of the tab based on its 'active' input or router activity.	this.active()
setActiveLink()	Method on DAYTabComponent that triggers its parent tabs component to activate it.	—

Directives

Not included

Public methods

Name	Description	Default
setActiveLink(tab: DAYTabComponent)	Sets the specified tab as active and deactivates the others.	—

Dependencies

'/core'

Example

Html

Demo

Tab 1

Tab 2 with large content

Section link tab 1

Description

<day-tabs> is a container used to manage multiple child tabs (<day-tab>).
It supports two display types: 'toggle' and 'tabular', configurable via the type input.
It dynamically detects and manages all child tabs using contentChildren.
The active tab is determined through a computed property that finds the first tab with isActive = true.
The setActiveLink(tab) method allows manually setting a tab as active, deactivating the others.
<day-tab> represents an individual tab, which can contain a custom template and an optional link.
The active state is reactive using linkedSignal and can be controlled externally.
A tab can be disabled via the disabled input, applying a conditional CSS class.
It uses RouterLink and RouterLinkActive to support navigation when the tab includes a link.
In the ngAfterViewChecked lifecycle hook, it checks if the internal anchor has the active class from the router and updates the tab's active state accordingly.