Skip to content

docs(material/tabs): update MDC changes #25760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 5, 2022
Merged

docs(material/tabs): update MDC changes #25760

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions guides/v15-mdc-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,10 +568,14 @@ TODO(mmalerba): link to density docs once they exist.

### Tabs

* Accessibility: `<mat-tab-nav-bar>` now requires an additional `<mat-tab-nav-panel>` element to
be wrapped around the content that it is connected to. A refernece to the tab panel has to be
passed in to the `tabPanel` or an error will be thrown. The addition of the tab panel allows
for better labelling for assistive technology.
* Header label text color matches the theme color when the tab header is selected.

* Header labels stretch to fill the container's width. This can be turned off by
setting the `<mat-tab-group>` input `mat-stretch-tabs` to `false`.

* The `<mat-tab-nav-bar>` requires a reference to a `<mat-tab-nav-panel>` using the `tabPanel` input.
The `<mat-tab-nav-panel>` must wrap the content connected to the nav-bar. This allows
the component to provide correct labeling for assistive technology.

```html
<!-- Before -->
Expand All @@ -582,11 +586,6 @@ TODO(mmalerba): link to density docs once they exist.
<mat-tab-nav-panel #tabPanel>...</mat-tab-nav-panel>
```

* The selected tab label now uses a text color from the theme, matching the selection indicator.

* Tab header labels default to stretching the width of the container. This can be turned off by
providing `mat-stretch-tabs="false"`.

### Tooltip

* Background color is opaque instead of slightly transparent. This improves accessibility.
Expand Down