diff --git a/src/lib/tabs/OVERVIEW.md b/src/lib/tabs/OVERVIEW.md new file mode 100644 index 00000000000..18c670d76c4 --- /dev/null +++ b/src/lib/tabs/OVERVIEW.md @@ -0,0 +1,60 @@ +The Angular Material tab group helps organize content into separate views where only one view can be +visible at a time. Each tab's label is shown in the tab header and the active +tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width +of the header, pagination controls appear to let the user scroll left and right across the labels. + +The active tab may be set using the `selectedIndex` input or when the user selects one of the +tab labels in the header. + + + +### Events + +The `selectChange` output event is emitted when the active tab changes. + +The `focusChange` output event is emitted when the user puts focus on any of the tab labels in +the header, usually through keyboard navigation. + +### Labels + +If a tab's label is only text then the simple tab-group API can be used. + +```html + + +

Some tab content

+

...

+
+ +

Some more tab content

+

...

+
+
+``` + +For more complex labels, add a template with the `md-tab-label` directive inside the `md-tab`. + +```html + + + +

Best pasta restaurants

+

...

+
+ + +

Terrible sushi restaurants

+

...

+
+
+``` + +### Dynamic Height + +By default, the tab group will not change its height to the height of the currently active tab. To +change this, set the `dynamicHeight` input to true. The tab body will animate its height according + to the height of the active tab. \ No newline at end of file