From a7bf39b9232942e441d866f94051c2a5db25ab69 Mon Sep 17 00:00:00 2001 From: anle9650 Date: Sat, 13 Jan 2024 17:56:00 -0700 Subject: [PATCH 1/3] Update tabs.md --- docs/data/material/components/tabs/tabs.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index cd1a490888958e..108860a4fba602 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -16,12 +16,25 @@ Tabs organize and allow navigation between groups of content that are related an {{"component": "modules/components/ComponentLinkHeader.js"}} -## Basic tabs +## Introduction -A basic example with tab panels. +Tabs are implemented using a collection of related components: + +- `` - the tab element itself. Clicking on a tab displays its corresponding panel. +- `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. +- `` - an alternative to the Tabs component, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). +- `` - an optional card that hosts the content associated with a tab, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). +- `` - an optional top-level component that wraps the Tab List and Tab Panel components, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). {{"demo": "BasicTabs.js"}} +## Basics + +```jsx +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +``` + ## Experimental API `@mui/lab` offers utility components that inject props to implement accessible tabs From 090561de2eacab68576a390cadf0eb58cd7d5bd6 Mon Sep 17 00:00:00 2001 From: anle9650 Date: Sat, 13 Jan 2024 18:29:14 -0700 Subject: [PATCH 2/3] Update tabs.md --- docs/data/material/components/tabs/tabs.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 108860a4fba602..26f036a1998a9a 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -22,9 +22,9 @@ Tabs are implemented using a collection of related components: - `` - the tab element itself. Clicking on a tab displays its corresponding panel. - `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. -- `` - an alternative to the Tabs component, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). -- `` - an optional card that hosts the content associated with a tab, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). -- `` - an optional top-level component that wraps the Tab List and Tab Panel components, which automatically implements accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). +- `` - an alternative to the Tabs component, which automatically injects props to implement accessible tabs. +- `` - the card that hosts the content associated with a tab. +- `` - the top-level component that wraps the Tab List and Tab Panel components, and automatically injects props to implement accessible tabs. {{"demo": "BasicTabs.js"}} From dd7a7e7d13c7e70a468f8bbd087a536e21852d17 Mon Sep 17 00:00:00 2001 From: anle9650 Date: Tue, 16 Jan 2024 19:51:06 -0700 Subject: [PATCH 3/3] move lab components to Experimental API --- docs/data/material/components/tabs/tabs.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 26f036a1998a9a..298aa3fabe29d2 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -22,9 +22,6 @@ Tabs are implemented using a collection of related components: - `` - the tab element itself. Clicking on a tab displays its corresponding panel. - `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. -- `` - an alternative to the Tabs component, which automatically injects props to implement accessible tabs. -- `` - the card that hosts the content associated with a tab. -- `` - the top-level component that wraps the Tab List and Tab Panel components, and automatically injects props to implement accessible tabs. {{"demo": "BasicTabs.js"}} @@ -38,7 +35,11 @@ import Tab from '@mui/material/Tab'; ## Experimental API `@mui/lab` offers utility components that inject props to implement accessible tabs -following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). +following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): + +- `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. +- `` - the card that hosts the content associated with a tab. +- `` - the top-level component that wraps the Tab List and Tab Panel components. {{"demo": "LabTabs.js"}}