Tab group with aligned labels
First
Second
Third
Content 1
First
Second
Third
Content 1
First
Second
Third
Content 1
Tab group animations
No animation
First
Second
Third
Content 1
Very slow animation
First
Second
Third
Content 1
Tab group with asynchronously loading tab contents
First
Second
Third
Content 1
Basic use of the tab group
First
Second
Third
Content 1
Using tabs with a custom label template
First
Second
Third
Content 1
Tab group with dynamic height based on tab contents
Short tab
Long tab
Small content
Tab group with dynamically changing tabs
First
Second
Third
Contents for First tab
Testing with MatTabGroupHarness
This example contains tests. Open in Stackblitz to run the tests.
Tab group with headers below the content
First
Second
Third
Content 1
Tab group with ink bar fit to content
First
Second
Third
Fourth
Content 1
Tab group where the tab content is loaded lazily (when activated)
First
Second
Third
Content 1 - Loaded: Feb 5, 2025, 8:41:22 AM
Tab group with paginated tabs
Tab 0
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10
Tab 11
Tab 12
Tab 13
Tab 14
Tab 15
Tab 16
Tab 17
Tab 18
Tab 19
Tab 20
Tab 21
Tab 22
Tab 23
Tab 24
Tab 25
Tab 26
Tab 27
Tab 28
Tab 29
Content
Tab group that keeps its content inside the DOM when it's off-screen.
Start the video in the first tab and navigate to the second one to see how it keeps playing.
First
Second
Tab group with stretched labels
First
Second
Third
Content 1
Basic use of the tab nav bar