Tabs

palette grid_view
Tabs organize groups of related content that are at the same level of hierarchy.
## Installation
## API ### `TabsComponent` - `` | Name | Description | | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `@Input() activeTabIndex: number` | Defaults to `0` | | `@Input() preserveContent: boolean` | By default tabs remove their content from the DOM while it's off-screen. Setting this to `true` will keep it in the DOM which will prevent elements like iframes and videos from reloading next time it comes back into the view. | | `@Input() tabsClass: string` | Classes to be applied to underlying `md-tabs`. Useful for customizations. | | `@Output() tabChange: EventEmitter` | Event emitted when the tab selection has changed. | ### `PrimaryTabComponent` - ``, `SecondaryTabComponent` - `` | Name | Description | | --------------------------------------------------------- | ------------------------------------------------------------------------ | | `@Input() inlineIcon: boolean` | Whether or not the icon renders inline with label or stacked vertically. | | `@Input() id: string` | | | `@Input({ alias: "aria-controls" }) ariaControls: string` | | | `@Input() icon: string` | Material symbol to render | | `@Input({ required: true }) value: string` | Contextual value of tab, used to show/hide `tab-content` | ## Usage ### Primary Tabs Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations.
### Secondary Tabs Secondary tabs are used within a content area to further separate related content and establish hierarchy.
### Scrolling Tabs Just add `scrolling` class with `tabs`.
### Custom Tabs Provide your class with `tabsClass` to achieve custom behavior.
### Primary and Secondary Tabs
### Dynamic Tabs
### Preserve Content By default the `` will remove the content of off-screen tabs from the DOM until they come into the view. This is optimal for most cases since it keeps the DOM size smaller, but it isn't great for others like when a tab has an `
Support Free Content Creation

Contributions & Support

Even though the courses and articles are available at no cost, your support in my endeavor to deliver top-notch educational content would be highly valued. Your decision to contribute aids me in persistently improving the course, creating additional resources, and maintaining the accessibility of these materials for all. I'm grateful for your consideration to contribute and make a meaningful difference!

Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter)