Skip to content

Commit 052c960

Browse files
andy-hookandy-hook
committed
Document tabs animation (#397)
* Update file version/s * Update doc
1 parent 88ea703 commit 052c960

File tree

3 files changed

+329
-8
lines changed

3 files changed

+329
-8
lines changed

‎data/primitives/components/tabs/0.1.6.mdx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ aria: https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
1212
one at a time.
1313
</Description>
1414

15-
<HeroContainer>
16-
<TabsDemo />
17-
</HeroContainer>
18-
19-
```jsx hero template=Tabs
20-
21-
```
22-
2315
<Highlights
2416
features={[
2517
'Can be controlled or uncontrolled.',

‎data/primitives/components/tabs/0.2.0.mdx‎

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
---
2+
metaTitle: Tabs
3+
metaDescription: A set of layered sections of content—known as tab panels—that are displayed one at a time.
4+
name: tabs
5+
aria: https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel
6+
---
7+
8+
# Tabs
9+
10+
<Description>
11+
A set of layered sections of content—known as tab panels—that are displayed
12+
one at a time.
13+
</Description>
14+
15+
<HeroContainer>
16+
<TabsDemo />
17+
</HeroContainer>
18+
19+
```jsx hero template=Tabs
20+
21+
```
22+
23+
<Highlights
24+
features={[
25+
'Can be controlled or uncontrolled.',
26+
'Supports horizontal/vertical orientation.',
27+
'Supports automatic/manual activation.',
28+
'Full keyboard navigation.',
29+
]}
30+
/>
31+
32+
## Installation
33+
34+
Install the component from your command line.
35+
36+
```bash
37+
npm install @radix-ui/react-tabs
38+
```
39+
40+
## Anatomy
41+
42+
Import all parts and piece them together.
43+
44+
```jsx
45+
import * as Tabs from '@radix-ui/react-tabs';
46+
47+
export default () => (
48+
<Tabs.Root>
49+
<Tabs.List>
50+
<Tabs.Trigger />
51+
</Tabs.List>
52+
<Tabs.Content />
53+
</Tabs.Root>
54+
);
55+
```
56+
57+
## API Reference
58+
59+
### Root
60+
61+
Contains all the tabs component parts.
62+
63+
<PropsTable
64+
data={[
65+
{
66+
name: 'asChild',
67+
required: false,
68+
type: 'boolean',
69+
default: 'false',
70+
description:
71+
'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.',
72+
},
73+
{
74+
name: 'defaultValue',
75+
required: false,
76+
type: 'string',
77+
description:
78+
'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.',
79+
},
80+
{
81+
name: 'value',
82+
required: false,
83+
type: 'string',
84+
description: (
85+
<span>
86+
The controlled value of the tab to activate. Should be used in
87+
conjunction with <Code>onValueChange</Code>.
88+
</span>
89+
),
90+
},
91+
{
92+
name: 'onValueChange',
93+
required: false,
94+
type: '(value: string) => void',
95+
typeSimple: 'function',
96+
description: 'Event handler called when the value changes.',
97+
},
98+
{
99+
name: 'orientation',
100+
required: false,
101+
type: '"horizontal" | "vertical" | undefined',
102+
typeSimple: 'enum',
103+
default: '"horizontal"',
104+
description: 'The orientation of the component.',
105+
},
106+
{
107+
name: 'dir',
108+
required: false,
109+
type: '"ltr" | "rtl"',
110+
typeSimple: 'enum',
111+
description: (
112+
<span>
113+
The reading direction of the tabs. If omitted, inherits globally from{' '}
114+
<Code>DirectionProvider</Code> or assumes LTR (left-to-right) reading
115+
mode.
116+
</span>
117+
),
118+
},
119+
{
120+
name: 'activationMode',
121+
required: false,
122+
type: '"automatic" | "manual"',
123+
typeSimple: 'enum',
124+
default: '"automatic"',
125+
description: (
126+
<span>
127+
When <Code>automatic</Code>, tabs are activated when receiving focus.
128+
When <Code>manual</Code>, tabs are activated when clicked.
129+
</span>
130+
),
131+
},
132+
]}
133+
/>
134+
135+
### List
136+
137+
Contains the triggers that are aligned along the edge of the active content.
138+
139+
<PropsTable
140+
data={[
141+
{
142+
name: 'asChild',
143+
required: false,
144+
type: 'boolean',
145+
default: 'false',
146+
description:
147+
'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.',
148+
},
149+
{
150+
name: 'loop',
151+
required: false,
152+
type: 'boolean',
153+
default: 'true',
154+
description: (
155+
<span>
156+
When <Code>true</Code>, keyboard navigation will loop from last tab to
157+
first, and vice versa.
158+
</span>
159+
),
160+
},
161+
]}
162+
/>
163+
164+
### Trigger
165+
166+
The button that activates its associated content.
167+
168+
<PropsTable
169+
data={[
170+
{
171+
name: 'asChild',
172+
required: false,
173+
type: 'boolean',
174+
default: 'false',
175+
description:
176+
'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.',
177+
},
178+
{
179+
name: 'value',
180+
required: true,
181+
type: 'string',
182+
description: 'A unique value that associates the trigger with a content.',
183+
},
184+
{
185+
name: 'disabled',
186+
required: false,
187+
type: 'boolean',
188+
default: 'false',
189+
description: (
190+
<span>
191+
When <Code>true</Code>, prevents the user from interacting with the
192+
tab.
193+
</span>
194+
),
195+
},
196+
]}
197+
/>
198+
199+
### Content
200+
201+
Contains the content associated with each trigger.
202+
203+
<PropsTable
204+
data={[
205+
{
206+
name: 'asChild',
207+
required: false,
208+
type: 'boolean',
209+
default: 'false',
210+
description:
211+
'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.',
212+
},
213+
{
214+
name: 'value',
215+
required: true,
216+
type: 'string',
217+
description: 'A unique value that associates the content with a trigger.',
218+
},
219+
{
220+
name: 'forceMount',
221+
type: 'boolean',
222+
description: (
223+
<span>
224+
Used to force mounting when more control is needed. Useful when
225+
controlling animation with React animation libraries.
226+
</span>
227+
),
228+
},
229+
]}
230+
/>
231+
232+
## Examples
233+
234+
### Vertical
235+
236+
You can create vertical tabs by using the `orientation` prop.
237+
238+
```jsx line=4
239+
import * as Tabs from '@radix-ui/react-tabs';
240+
241+
export default () => (
242+
<Tabs.Root defaultValue="tab1" __orientation__="vertical">
243+
<Tabs.List aria-label="tabs example">
244+
<Tabs.Trigger value="tab1">One</Tabs.Trigger>
245+
<Tabs.Trigger value="tab2">Two</Tabs.Trigger>
246+
<Tabs.Trigger value="tab3">Three</Tabs.Trigger>
247+
</Tabs.List>
248+
<Tabs.Content value="tab1">Tab one content</Tabs.Content>
249+
<Tabs.Content value="tab2">Tab two content</Tabs.Content>
250+
<Tabs.Content value="tab3">Tab three content</Tabs.Content>
251+
</Tabs.Root>
252+
);
253+
```
254+
255+
## Accessibility
256+
257+
Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel).
258+
259+
### Keyboard Interactions
260+
261+
<KeyboardTable
262+
data={[
263+
{
264+
keys: ['Tab'],
265+
description: (
266+
<span>
267+
When focus moves onto the tabs, focuses the active trigger. When a
268+
trigger is focused, moves focus to the active content.
269+
</span>
270+
),
271+
},
272+
{
273+
keys: ['ArrowDown'],
274+
description: (
275+
<span>
276+
Moves focus to the next trigger depending on <Code>orientation</Code>{' '}
277+
and activates its associated content.
278+
</span>
279+
),
280+
},
281+
{
282+
keys: ['ArrowRight'],
283+
description: (
284+
<span>
285+
Moves focus to the next trigger depending on <Code>orientation</Code>{' '}
286+
and activates its associated content.
287+
</span>
288+
),
289+
},
290+
{
291+
keys: ['ArrowUp'],
292+
description: (
293+
<span>
294+
Moves focus to the previous trigger depending on{' '}
295+
<Code>orientation</Code> and activates its associated content.
296+
</span>
297+
),
298+
},
299+
{
300+
keys: ['ArrowLeft'],
301+
description: (
302+
<span>
303+
Moves focus to the previous trigger depending on{' '}
304+
<Code>orientation</Code> and activates its associated content.
305+
</span>
306+
),
307+
},
308+
{
309+
keys: ['Home'],
310+
description: (
311+
<span>
312+
Moves focus to the first trigger and activates its associated content.
313+
</span>
314+
),
315+
},
316+
{
317+
keys: ['End'],
318+
description: (
319+
<span>
320+
Moves focus to the last trigger and activates its associated content.
321+
</span>
322+
),
323+
},
324+
]}
325+
/>

‎data/primitives/overview/releases.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@ metaDescription: Radix Primitives releases and their changelogs.
5656

5757
- Fix issue with children ordering when using `Slottable` <PRLink id={1376} />
5858

59+
<PackageRelease name="Tabs" version="0.2.0" />
60+
61+
- Add support for lifecycle animation to `Tabs.Content` <PRLink id={1346} />
62+
5963
<PackageRelease name="Toast" version="0.1.2" />
6064

6165
- Improve Typescript types when using `asChild` <PRLink id={1300} />

0 commit comments

Comments
 (0)