From 23a9e24d1088cd5f680d53fe60ef6d4a3da5e9f2 Mon Sep 17 00:00:00 2001 From: Andy Le Date: Wed, 17 Jan 2024 04:29:48 -0700 Subject: [PATCH] [material-ui][docs] Improve TabContext, TabList, and TabPanel documentation (#40587) --- docs/data/material/components/tabs/tabs.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index cd1a490888958e..298aa3fabe29d2 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -16,16 +16,30 @@ 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. {{"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 -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"}}