Skip to content

Commit 1e6fb49

Browse files
naorpelednaorpeled
committed
docs(tabs): add missing examples
1 parent 025cf42 commit 1e6fb49

File tree

3 files changed

+384
-5
lines changed

3 files changed

+384
-5
lines changed

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

Lines changed: 234 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { component$, Slot, useStyles$ } from '@builder.io/qwik';
1+
import {
2+
component$,
3+
Slot,
4+
useSignal,
5+
useStore,
6+
useStyles$,
7+
} from '@builder.io/qwik';
28
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
39
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
410
import styles from './index.css?inline';
@@ -74,3 +80,230 @@ export const VerticalTabsExample = component$(() => {
7480
</PreviewCodeExample>
7581
);
7682
});
83+
84+
export const DisabledTabsExample = component$(() => {
85+
return (
86+
<PreviewCodeExample>
87+
<div q:slot="actualComponent" class="tabs-example mr-auto">
88+
<Tabs>
89+
<h3 id="tablist-1">Danish Composers</h3>
90+
<TabList>
91+
<Tab disabled={true}>I'm a disabled tab</Tab>
92+
<Tab>Carl Andersen</Tab>
93+
<Tab>Ida Henriette da Fonseca</Tab>
94+
</TabList>
95+
<TabPanel>
96+
<p>
97+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
98+
a ...
99+
</p>
100+
</TabPanel>
101+
<TabPanel>
102+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
103+
</TabPanel>
104+
<TabPanel>
105+
<p>
106+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
107+
</p>
108+
</TabPanel>
109+
</Tabs>
110+
</div>
111+
112+
<div q:slot="codeExample">
113+
<Slot />
114+
</div>
115+
</PreviewCodeExample>
116+
);
117+
});
118+
119+
export const DynamicTabsExample = component$(() => {
120+
const tabsState = useStore([
121+
'Dynamic Tab 1',
122+
'Dynamic Tab 2',
123+
'Dynamic Tab 3',
124+
]);
125+
126+
return (
127+
<PreviewCodeExample>
128+
<div q:slot="actualComponent" class="tabs-example mr-auto">
129+
<Tabs>
130+
<TabList>
131+
{tabsState.map((tab) => (
132+
<Tab key={tab}>{tab}</Tab>
133+
))}
134+
</TabList>
135+
{tabsState.map((tab) => (
136+
<TabPanel key={tab}>{tab} Panel</TabPanel>
137+
))}
138+
</Tabs>
139+
<button
140+
style={{ color: 'red' }}
141+
onClick$={() => tabsState.splice(0, 1)}
142+
>
143+
Remove Tab
144+
</button>
145+
</div>
146+
147+
<div q:slot="codeExample">
148+
<Slot />
149+
</div>
150+
</PreviewCodeExample>
151+
);
152+
});
153+
154+
export const AutomaticBehaviorTabsExample = component$(() => {
155+
return (
156+
<PreviewCodeExample>
157+
<div q:slot="actualComponent" class="tabs-example mr-auto">
158+
<Tabs behavior="automatic">
159+
<h3 id="tablist-1">Danish Composers</h3>
160+
<TabList>
161+
<Tab>Maria Ahlefeldt</Tab>
162+
<Tab>Carl Andersen</Tab>
163+
<Tab>Ida Henriette da Fonseca</Tab>
164+
</TabList>
165+
<TabPanel>
166+
<p>
167+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
168+
a ...
169+
</p>
170+
</TabPanel>
171+
<TabPanel>
172+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
173+
</TabPanel>
174+
<TabPanel>
175+
<p>
176+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
177+
</p>
178+
</TabPanel>
179+
</Tabs>
180+
</div>
181+
182+
<div q:slot="codeExample">
183+
<Slot />
184+
</div>
185+
</PreviewCodeExample>
186+
);
187+
});
188+
189+
export const ManualBehaviorTabsExample = component$(() => {
190+
return (
191+
<PreviewCodeExample>
192+
<div q:slot="actualComponent" class="tabs-example mr-auto">
193+
<Tabs behavior="automatic">
194+
<h3 id="tablist-1">Danish Composers</h3>
195+
<TabList>
196+
<Tab>Maria Ahlefeldt</Tab>
197+
<Tab>Carl Andersen</Tab>
198+
<Tab>Ida Henriette da Fonseca</Tab>
199+
</TabList>
200+
<TabPanel>
201+
<p>
202+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
203+
a ...
204+
</p>
205+
</TabPanel>
206+
<TabPanel>
207+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
208+
</TabPanel>
209+
<TabPanel>
210+
<p>
211+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
212+
</p>
213+
</TabPanel>
214+
</Tabs>
215+
</div>
216+
217+
<div q:slot="codeExample">
218+
<Slot />
219+
</div>
220+
</PreviewCodeExample>
221+
);
222+
});
223+
224+
export const OnSelectedIndexChangeTabsExample = component$(() => {
225+
const selectedIndexSig = useSignal(0);
226+
227+
return (
228+
<PreviewCodeExample>
229+
<div q:slot="actualComponent" class="tabs-example mr-auto">
230+
<Tabs
231+
selectedIndex={selectedIndexSig.value}
232+
onSelectedIndexChange$={(e) => {
233+
selectedIndexSig.value = e;
234+
}}
235+
>
236+
<h3 id="tablist-1">Danish Composers</h3>
237+
<TabList>
238+
<Tab>Maria Ahlefeldt</Tab>
239+
<Tab>Carl Andersen</Tab>
240+
<Tab>Ida Henriette da Fonseca</Tab>
241+
</TabList>
242+
<TabPanel>
243+
<p>
244+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
245+
a ...
246+
</p>
247+
</TabPanel>
248+
<TabPanel>
249+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
250+
</TabPanel>
251+
<TabPanel>
252+
<p>
253+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
254+
</p>
255+
</TabPanel>
256+
</Tabs>
257+
258+
<p>Selected Index: {selectedIndexSig.value}</p>
259+
</div>
260+
261+
<div q:slot="codeExample">
262+
<Slot />
263+
</div>
264+
</PreviewCodeExample>
265+
);
266+
});
267+
268+
export const OnClickTabsExample = component$(() => {
269+
const tabsClickedCountSig = useSignal(0);
270+
271+
return (
272+
<PreviewCodeExample>
273+
<div q:slot="actualComponent" class="tabs-example mr-auto">
274+
<Tabs
275+
onClick$={() => {
276+
tabsClickedCountSig.value++;
277+
}}
278+
>
279+
<h3 id="tablist-1">Danish Composers</h3>
280+
<TabList>
281+
<Tab>Maria Ahlefeldt</Tab>
282+
<Tab>Carl Andersen</Tab>
283+
<Tab>Ida Henriette da Fonseca</Tab>
284+
</TabList>
285+
<TabPanel>
286+
<p>
287+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
288+
a ...
289+
</p>
290+
</TabPanel>
291+
<TabPanel>
292+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
293+
</TabPanel>
294+
<TabPanel>
295+
<p>
296+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
297+
</p>
298+
</TabPanel>
299+
</Tabs>
300+
301+
<p>Click count: {tabsClickedCountSig.value}</p>
302+
</div>
303+
304+
<div q:slot="codeExample">
305+
<Slot />
306+
</div>
307+
</PreviewCodeExample>
308+
);
309+
});

0 commit comments

Comments
 (0)