-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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.
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
[Base][Tab] Add vertical tabs demo #37292
Conversation
Netlify deploy previewBundle size report |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good, mate! Just made a few tweaks to the design.
@@ -67,6 +67,12 @@ The next demo shows how to apply custom styles to a set of tabs: | |||
|
|||
{{"demo": "UnstyledTabsCustomized.js"}} | |||
|
|||
### Vertical |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you move this section down to underneath the ## Customization
header? It can be the first item, above the section about TypeScript.
@@ -67,6 +67,12 @@ The next demo shows how to apply custom styles to a set of tabs: | |||
|
|||
{{"demo": "UnstyledTabsCustomized.js"}} | |||
|
|||
### Vertical | |||
|
|||
To adapt keyboard navigation (e.g. arrow keys) to use a vertical orientation, set `orientation="vertical"` on the `Tabs` component. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's make this more informative, and also clarify that it's a "must" for a11y purposes.
To adapt keyboard navigation (e.g. arrow keys) to use a vertical orientation, set `orientation="vertical"` on the `Tabs` component. | |
Tab components can be arranged vertically as well as horizontally. | |
When vertical, you must set `orientation="vertical"` on the `<Tabs />` component so the user can navigate with the up and down arrow keys (rather than the default left-to-right behavior for horizontal tabs). |
closes #31111
preview: https://deploy-preview-37292--material-ui.netlify.app/base/react-tabs/#vertical