-
Notifications
You must be signed in to change notification settings - Fork 567
Document tabs animation #397
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
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,325 @@ | ||
| --- | ||
| metaTitle: Tabs | ||
| metaDescription: A set of layered sections of content—known as tab panels—that are displayed one at a time. | ||
| name: tabs | ||
| aria: https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel | ||
| --- | ||
|
|
||
| # Tabs | ||
|
|
||
| <Description> | ||
| A set of layered sections of content—known as tab panels—that are displayed | ||
| one at a time. | ||
| </Description> | ||
|
|
||
| <HeroContainer> | ||
| <TabsDemo /> | ||
| </HeroContainer> | ||
|
|
||
| ```jsx hero template=Tabs | ||
|
|
||
| ``` | ||
|
|
||
| <Highlights | ||
| features={[ | ||
| 'Can be controlled or uncontrolled.', | ||
| 'Supports horizontal/vertical orientation.', | ||
| 'Supports automatic/manual activation.', | ||
| 'Full keyboard navigation.', | ||
| ]} | ||
| /> | ||
|
|
||
| ## Installation | ||
|
|
||
| Install the component from your command line. | ||
|
|
||
| ```bash | ||
| npm install @radix-ui/react-tabs | ||
| ``` | ||
|
|
||
| ## Anatomy | ||
|
|
||
| Import all parts and piece them together. | ||
|
|
||
| ```jsx | ||
| import * as Tabs from '@radix-ui/react-tabs'; | ||
|
|
||
| export default () => ( | ||
| <Tabs.Root> | ||
| <Tabs.List> | ||
| <Tabs.Trigger /> | ||
| </Tabs.List> | ||
| <Tabs.Content /> | ||
| </Tabs.Root> | ||
| ); | ||
| ``` | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### Root | ||
|
|
||
| Contains all the tabs component parts. | ||
|
|
||
| <PropsTable | ||
| data={[ | ||
| { | ||
| name: 'asChild', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: | ||
| 'Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.', | ||
| }, | ||
| { | ||
| name: 'defaultValue', | ||
| required: false, | ||
| type: 'string', | ||
| description: | ||
| 'The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.', | ||
| }, | ||
| { | ||
| name: 'value', | ||
| required: false, | ||
| type: 'string', | ||
| description: ( | ||
| <span> | ||
| The controlled value of the tab to activate. Should be used in | ||
| conjunction with <Code>onValueChange</Code>. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'onValueChange', | ||
| required: false, | ||
| type: '(value: string) => void', | ||
| typeSimple: 'function', | ||
| description: 'Event handler called when the value changes.', | ||
| }, | ||
| { | ||
| name: 'orientation', | ||
| required: false, | ||
| type: '"horizontal" | "vertical" | undefined', | ||
| typeSimple: 'enum', | ||
| default: '"horizontal"', | ||
| description: 'The orientation of the component.', | ||
| }, | ||
| { | ||
| name: 'dir', | ||
| required: false, | ||
| type: '"ltr" | "rtl"', | ||
| typeSimple: 'enum', | ||
| description: ( | ||
| <span> | ||
| The reading direction of the tabs. If omitted, inherits globally from{' '} | ||
| <Code>DirectionProvider</Code> or assumes LTR (left-to-right) reading | ||
| mode. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'activationMode', | ||
| required: false, | ||
| type: '"automatic" | "manual"', | ||
| typeSimple: 'enum', | ||
| default: '"automatic"', | ||
| description: ( | ||
| <span> | ||
| When <Code>automatic</Code>, tabs are activated when receiving focus. | ||
| When <Code>manual</Code>, tabs are activated when clicked. | ||
| </span> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ### List | ||
|
|
||
| Contains the triggers that are aligned along the edge of the active content. | ||
|
|
||
| <PropsTable | ||
| data={[ | ||
| { | ||
| name: 'asChild', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: | ||
| 'Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.', | ||
| }, | ||
| { | ||
| name: 'loop', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'true', | ||
| description: ( | ||
| <span> | ||
| When <Code>true</Code>, keyboard navigation will loop from last tab to | ||
| first, and vice versa. | ||
| </span> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ### Trigger | ||
|
|
||
| The button that activates its associated content. | ||
|
|
||
| <PropsTable | ||
| data={[ | ||
| { | ||
| name: 'asChild', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: | ||
| 'Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.', | ||
| }, | ||
| { | ||
| name: 'value', | ||
| required: true, | ||
| type: 'string', | ||
| description: 'A unique value that associates the trigger with a content.', | ||
| }, | ||
| { | ||
| name: 'disabled', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: ( | ||
| <span> | ||
| When <Code>true</Code>, prevents the user from interacting with the | ||
| tab. | ||
| </span> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ### Content | ||
|
|
||
| Contains the content associated with each trigger. | ||
|
|
||
| <PropsTable | ||
| data={[ | ||
| { | ||
| name: 'asChild', | ||
| required: false, | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: | ||
| 'Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.', | ||
| }, | ||
| { | ||
| name: 'value', | ||
| required: true, | ||
| type: 'string', | ||
| description: 'A unique value that associates the content with a trigger.', | ||
| }, | ||
| { | ||
| name: 'forceMount', | ||
| type: 'boolean', | ||
| description: ( | ||
| <span> | ||
| Used to force mounting when more control is needed. Useful when | ||
| controlling animation with React animation libraries. | ||
| </span> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Vertical | ||
|
|
||
| You can create vertical tabs by using the `orientation` prop. | ||
|
|
||
| ```jsx line=4 | ||
| import * as Tabs from '@radix-ui/react-tabs'; | ||
|
|
||
| export default () => ( | ||
| <Tabs.Root defaultValue="tab1" __orientation__="vertical"> | ||
| <Tabs.List aria-label="tabs example"> | ||
| <Tabs.Trigger value="tab1">One</Tabs.Trigger> | ||
| <Tabs.Trigger value="tab2">Two</Tabs.Trigger> | ||
| <Tabs.Trigger value="tab3">Three</Tabs.Trigger> | ||
| </Tabs.List> | ||
| <Tabs.Content value="tab1">Tab one content</Tabs.Content> | ||
| <Tabs.Content value="tab2">Tab two content</Tabs.Content> | ||
| <Tabs.Content value="tab3">Tab three content</Tabs.Content> | ||
| </Tabs.Root> | ||
| ); | ||
| ``` | ||
|
|
||
| ## Accessibility | ||
|
|
||
| Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel). | ||
|
|
||
| ### Keyboard Interactions | ||
|
|
||
| <KeyboardTable | ||
| data={[ | ||
| { | ||
| keys: ['Tab'], | ||
| description: ( | ||
| <span> | ||
| When focus moves onto the tabs, focuses the active trigger. When a | ||
| trigger is focused, moves focus to the active content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['ArrowDown'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the next trigger depending on <Code>orientation</Code>{' '} | ||
| and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['ArrowRight'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the next trigger depending on <Code>orientation</Code>{' '} | ||
| and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['ArrowUp'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the previous trigger depending on{' '} | ||
| <Code>orientation</Code> and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['ArrowLeft'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the previous trigger depending on{' '} | ||
| <Code>orientation</Code> and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['Home'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the first trigger and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| { | ||
| keys: ['End'], | ||
| description: ( | ||
| <span> | ||
| Moves focus to the last trigger and activates its associated content. | ||
| </span> | ||
| ), | ||
| }, | ||
| ]} | ||
| /> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Why is this
0.2.0did we do a minor? I know it doesn't matter much as we'll do 1.0.0 soon but still curious.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.
Was an old PR, must have been trying to form good habits.