Skip to content

Commit 6d0389e

Browse files
shairezshairez
authored
Merge pull request #291 from qwikifiers/add-headless-tabs-docs
2 parents a842dab + 6b89984 commit 6d0389e

File tree

5 files changed

+216
-57
lines changed

5 files changed

+216
-57
lines changed

‎apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { component$, Slot, useStyles$ } from '@builder.io/qwik';
2+
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
3+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
4+
import styles from './index.css?inline';
5+
6+
export const Example01 = component$(() => {
7+
useStyles$(styles);
8+
9+
return (
10+
<PreviewCodeExample>
11+
<div q:slot="actualComponent" class="tabs-example">
12+
<Tabs behavior="automatic">
13+
<h3 id="tablist-1">Danish Composers</h3>
14+
<TabList>
15+
<Tab>Maria Ahlefeldt</Tab>
16+
<Tab>Carl Andersen</Tab>
17+
<Tab>Ida Henriette da Fonseca</Tab>
18+
</TabList>
19+
<TabPanel>
20+
<p>
21+
Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was
22+
a ...
23+
</p>
24+
</TabPanel>
25+
<TabPanel>
26+
<p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...</p>
27+
</TabPanel>
28+
<TabPanel>
29+
<p>
30+
Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...
31+
</p>
32+
</TabPanel>
33+
</Tabs>
34+
</div>
35+
36+
<div q:slot="codeExample">
37+
<Slot />
38+
</div>
39+
</PreviewCodeExample>
40+
);
41+
});

‎apps/website/src/routes/docs/headless/(components)/tabs/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
* [role='tab'] {
1+
.tabs-example [role='tab'] {
22
width: 250px;
33
background: lightgreen;
44
}
55

6-
* [role='tab'].selected {
6+
.tabs-example [role='tab'].selected {
77
background: magenta;
88
}
99

10-
* [role='tablist'] {
10+
.tabs-example [role='tablist'] {
1111
border: 1px solid;
1212
}

‎apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Qwik UI | Tabs
3+
---
4+
5+
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
6+
import { Example01 } from './examples';
7+
import { CodeExample } from '../../../../../components/code-example/code-example';
8+
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
9+
import { APITable } from '../../../../../components/api-table/api-table';
10+
11+
# Tabs
12+
13+
#### Explore and switch between different views using tabs
14+
15+
{' '}
16+
17+
<Example01>
18+
```tsx
19+
<Tabs behavior="automatic">
20+
<h3 id="tablist-1">Danish Composers</h3>
21+
<TabList>
22+
<Tab>Maria Ahlefeldt</Tab>
23+
<Tab>Carl Andersen</Tab>
24+
<Tab>Ida Henriette da Fonseca</Tab>
25+
</TabList>
26+
<TabPanel>
27+
<p>
28+
Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a ...
29+
</p>
30+
</TabPanel>
31+
<TabPanel>
32+
<p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...</p>
33+
</TabPanel>
34+
<TabPanel>
35+
<p>Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...</p>
36+
</TabPanel>
37+
</Tabs>
38+
```
39+
</Example01>
40+
41+
## Building blocks
42+
43+
<CodeExample>
44+
```tsx
45+
import { component$ } from '@builder.io/qwik';
46+
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
47+
48+
export default component$(() => {
49+
50+
return (
51+
<>
52+
<h2>This is the documentation for the Tabs</h2>
53+
<Tabs behavior="automatic">
54+
<h3 id="tablist-1">Danish Composers</h3>
55+
<TabList>
56+
<Tab>Maria Ahlefeldt</Tab>
57+
<Tab>Carl Andersen</Tab>
58+
<Tab>Ida Henriette da Fonseca</Tab>
59+
</TabList>
60+
<TabPanel>
61+
<p>
62+
Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a ...
63+
</p>
64+
</TabPanel>
65+
<TabPanel>
66+
<p>
67+
Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...
68+
</p>
69+
</TabPanel>
70+
<TabPanel>
71+
<p>
72+
Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...
73+
</p>
74+
</TabPanel>
75+
</Tabs>
76+
</>
77+
);
78+
});
79+
```
80+
81+
</CodeExample>
82+
83+
## Accessibility
84+
85+
### Keyboard interaction
86+
87+
<KeyboardInteractionTable
88+
keyDescriptors={[
89+
{
90+
keyTitle: 'Tab',
91+
description: 'Moves focus to next tab.',
92+
},
93+
{
94+
keyTitle: 'Shift + Tab',
95+
description: 'Moves focus to the previous tab.',
96+
},
97+
]}
98+
/>
99+
100+
## API
101+
102+
### Tabs
103+
104+
<APITable
105+
propDescriptors={[
106+
{
107+
name: 'behavior',
108+
type: 'string',
109+
description:
110+
'Toggle between automatic or manual. The automatic behavior moves between tabs when hover. The manual behavior moves between tabs on click.',
111+
},
112+
]}
113+
/>
114+
115+
### TabList
116+
117+
<APITable
118+
propDescriptors={[
119+
{
120+
name: 'labelledBy',
121+
type: 'string',
122+
description:
123+
'The aria-labelledby for this tablist. Mainly for accessibility purpose.',
124+
},
125+
]}
126+
/>
127+
128+
### Tab
129+
130+
<APITable
131+
propDescriptors={[
132+
{
133+
name: 'selectedClassName',
134+
type: 'string',
135+
description: 'The class name to apply when the tab is selected',
136+
},
137+
{
138+
name: 'onClick',
139+
type: 'PropFunction<() => void>',
140+
description: 'A custom click handler to wire to tab click event',
141+
},
142+
]}
143+
/>

‎apps/website/src/routes/docs/headless/(components)/tabs/index.tsx

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎apps/website/src/routes/docs/headless/(components)/toggle/index.mdx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,32 @@ import { APITable } from '../../../../../components/api-table/api-table';
6464
},
6565
]}
6666
/>
67+
68+
## API
69+
70+
### Toggle
71+
72+
<APITable
73+
propDescriptors={[
74+
{
75+
name: 'pressed',
76+
type: 'boolean',
77+
description: 'Toggle between pressed and not pressed state',
78+
},
79+
{
80+
name: 'defaultPressed',
81+
type: 'boolean',
82+
description: 'The default pressed state when the toggle is rendered',
83+
},
84+
{
85+
name: 'onClick$',
86+
type: 'PropFunction<() => void>',
87+
description: 'A custom click handler to wire to the toggle click event',
88+
},
89+
{
90+
name: 'disabled',
91+
type: 'boolean',
92+
description: 'Sets whether the toggle is disabled or not',
93+
},
94+
]}
95+
/>

0 commit comments

Comments
 (0)