@anguless/angulux/tabs
tabs
5 declarations2 demos
import
import { TabsModule } from '@anguless/angulux/tabs';Basic
Tabs is composed of Tabs, TabList, TabPanels and TabPanel. A tab and its panel are paired by value.
Tabs is composed of four pieces: Tabs, TabList, TabPanels and TabPanel. A Tab and its TabPanel are paired by their value.
Only the selected panel is in the DOM when lazy is set; otherwise every panel renders and the inactive ones are hidden.
The value can be any string, and it is what you bind to in order to control the selection from outside.
<agl-tabs value="0"> <agl-tablist> <agl-tab value="0">Header I</agl-tab> <agl-tab value="1">Header II</agl-tab> <agl-tab value="2">Header III</agl-tab> </agl-tablist> <agl-tabpanels> <agl-tabpanel value="0"> <p>Tabs is composed of four pieces: Tabs, TabList, TabPanels and TabPanel. A Tab and its TabPanel are paired by their value.</p> </agl-tabpanel> <agl-tabpanel value="1"> <p>Only the selected panel is in the DOM when lazy is set; otherwise every panel renders and the inactive ones are hidden.</p> </agl-tabpanel> <agl-tabpanel value="2"> <p>The value can be any string, and it is what you bind to in order to control the selection from outside.</p> </agl-tabpanel> </agl-tabpanels></agl-tabs>Scrollable
When the headers do not fit, scrollable adds navigators instead of wrapping.
Content of tab 0.
Content of tab 1.
Content of tab 2.
Content of tab 3.
Content of tab 4.
Content of tab 5.
Content of tab 6.
Content of tab 7.
Content of tab 8.
Content of tab 9.
<agl-tabs value="0" [scrollable]="true"> <agl-tablist> @for (tab of tabs; track tab) { <agl-tab [value]="tab">Header {{ tab }}</agl-tab> } </agl-tablist> <agl-tabpanels> @for (tab of tabs; track tab) { <agl-tabpanel [value]="tab"> <p>Content of tab {{ tab }}.</p> </agl-tabpanel> } </agl-tabpanels></agl-tabs>API
Generated from the committed corpus, which check:corpus holds to the built library.
Tab
componentagl-tabDefines valid properties in Tab component.
| Input | Type | Default | Description |
|---|---|---|---|
| disabled | false | Whether the tab is disabled. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |
TabList
componentagl-tablistTabList is a helper component for Tabs component.
| Template slot | Description |
|---|---|
| <ng-template #previcon> | A template reference variable that represents the previous icon in a UI component. |
| <ng-template #nexticon> | A template reference variable that represents the next icon in a UI component. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |
TabPanel
componentagl-tabpanelTabPanel is a helper component for Tabs component.
| Input | Type | Default | Description |
|---|---|---|---|
| lazy | false | When enabled, tab is not rendered until activation. |
| Template slot | Description |
|---|---|
| <ng-template #content> | Template for initializing complex content when lazy is enabled. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |
TabPanels
componentagl-tabpanelsTabPanels is a helper component for Tabs component.
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |
Tabs
componentagl-tabsTabs facilitates seamless switching between different views.
| Input | Type | Default | Description |
|---|---|---|---|
| scrollable | false | When specified, enables horizontal and/or vertical scrolling. | |
| lazy | false | When enabled, tabs are not rendered until activation. | |
| selectOnFocus | false | When enabled, the focused tab is activated. | |
| showNavigators | true | Whether to display navigation buttons in container when scrollable is enabled. | |
| tabindex | 0 | Tabindex of the tab buttons. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |