Skip to content

Commit dc7981c

Browse files
shairezshairez
authored
Merge pull request #357 from shairez/pr-tabs-examples
2 parents 4fef96a + 8b7a301 commit dc7981c

File tree

22 files changed

+2615
-1046
lines changed

22 files changed

+2615
-1046
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ lib-types
66

77
# Development
88
node_modules
9-
migrations.json
9+
#migrations.json
1010

1111
# Cache
1212
.cache

‎apps/website/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
{
22
"name": "@qwik-ui/website",
33
"description": "The Qwik UI Website",
4-
"private": true
4+
"private": true,
5+
"dependencies": {
6+
"@qwik-ui/headless": "file:../../dist/packages/kit-headless",
7+
"@qwik-ui/tailwind": "file:../../dist/packages/kit-tailwind",
8+
"@qwik-ui/material": "file:../../dist/packages/kit-material",
9+
"@qwik-ui/primitives": "file:../../dist/packages/primitives"
10+
}
511
}

‎apps/website/src/_state/component-statuses.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
4444
Carousel: 'Planned',
4545
Popover: 'Planned',
4646
Select: 'Draft',
47-
Tabs: 'Planned',
47+
Tabs: 'Ready',
4848
Toggle: 'Planned',
4949
Tooltip: 'Planned',
5050
},

‎apps/website/src/components/preview-code-example/preview-code-example.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
1-
import { component$, Slot } from '@builder.io/qwik';
1+
import {
2+
component$,
3+
Slot,
4+
useStyles$,
5+
useStylesScoped$,
6+
} from '@builder.io/qwik';
27
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
38

49
export const PreviewCodeExample = component$(() => {
10+
useStyles$(`
11+
.dark .previewCodeExampleSelectedTab{
12+
background-color: #423dff;
13+
}
14+
.previewCodeExampleSelectedTab{
15+
background-color: #6daeff;
16+
}
17+
`);
518
return (
6-
<Tabs class="mb-12">
7-
<TabList class="flex rounded-t-xl px-4 bg-blue-200 dark:bg-indigo-900">
8-
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
19+
<Tabs class="mb-12" selectedClassName="previewCodeExampleSelectedTab">
20+
<TabList class="flex rounded-t-xl bg-blue-200 dark:bg-indigo-900">
21+
<Tab class="px-4 py-2 rounded-tl-xl hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
922
Preview
1023
</Tab>
11-
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
24+
<Tab class="px-4 py-2 hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
1225
Code
1326
</Tab>
1427
</TabList>

‎apps/website/src/global.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,6 @@ html {
6767
font-family: 'Poppins', sans-serif;
6868
}
6969

70-
[data-theme='light'] {
71-
--color-bg: rgb(203 213 225);
72-
--color-text: #333;
73-
}
74-
75-
[data-theme='dark'] {
76-
--color-bg: rgb(30 41 59);
77-
--color-text: rgb(203 213 225);
78-
}
79-
8070
body {
8171
min-height: 100%;
8272
}

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

Lines changed: 244 additions & 4 deletions
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';
@@ -9,8 +15,8 @@ export const Example01 = component$(() => {
915
return (
1016
<PreviewCodeExample>
1117
<div q:slot="actualComponent" class="tabs-example">
18+
<h3>Danish Composers</h3>
1219
<Tabs behavior="automatic">
13-
<h3 id="tablist-1">Danish Composers</h3>
1420
<TabList>
1521
<Tab>Maria Ahlefeldt</Tab>
1622
<Tab>Carl Andersen</Tab>
@@ -44,8 +50,9 @@ export const VerticalTabsExample = component$(() => {
4450
return (
4551
<PreviewCodeExample>
4652
<div q:slot="actualComponent" class="tabs-example mr-auto">
47-
<Tabs vertical>
48-
<h3 id="tablist-1">Danish Composers</h3>
53+
<h3>Danish Composers</h3>
54+
55+
<Tabs vertical class="flex flex-wrap gap-5">
4956
<TabList class="flex flex-col w-fit">
5057
<Tab>Maria Ahlefeldt</Tab>
5158
<Tab>Carl Andersen</Tab>
@@ -74,3 +81,236 @@ export const VerticalTabsExample = component$(() => {
7481
</PreviewCodeExample>
7582
);
7683
});
84+
85+
export const DisabledTabsExample = component$(() => {
86+
return (
87+
<PreviewCodeExample>
88+
<div q:slot="actualComponent" class="tabs-example mr-auto w-full">
89+
<h3>Dad jokes</h3>
90+
<Tabs>
91+
<TabList>
92+
<Tab style="width: 25%" disabled={true}>
93+
Disabled Tab
94+
</Tab>
95+
<Tab style="width: 25%">Joke 2</Tab>
96+
<Tab style="width: 25%">Joke 3</Tab>
97+
<Tab style="width: 25%">Joke 4</Tab>
98+
</TabList>
99+
<TabPanel>
100+
"What did the coffee report to the police", " A mugging."
101+
</TabPanel>
102+
<TabPanel>"What's brown and sticky", " A stick."</TabPanel>
103+
<TabPanel>
104+
"How do the trees get on the internet?", "They log on."
105+
</TabPanel>
106+
<TabPanel>
107+
"What did the fish say when he hit the wall", " Dam."
108+
</TabPanel>
109+
</Tabs>
110+
</div>
111+
112+
<div q:slot="codeExample">
113+
<Slot />
114+
</div>
115+
</PreviewCodeExample>
116+
);
117+
});
118+
119+
export const AutomaticBehaviorTabsExample = component$(() => {
120+
return (
121+
<PreviewCodeExample>
122+
<div q:slot="actualComponent" class="tabs-example mr-auto">
123+
<Tabs behavior="automatic">
124+
<h3>Danish Composers</h3>
125+
<h4>(Hover over the tabs)</h4>
126+
<TabList>
127+
<Tab>Maria Ahlefeldt</Tab>
128+
<Tab>Carl Andersen</Tab>
129+
<Tab>Ida Henriette da Fonseca</Tab>
130+
</TabList>
131+
<TabPanel>
132+
<p>
133+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
134+
a ...
135+
</p>
136+
</TabPanel>
137+
<TabPanel>
138+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
139+
</TabPanel>
140+
<TabPanel>
141+
<p>
142+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
143+
</p>
144+
</TabPanel>
145+
</Tabs>
146+
</div>
147+
148+
<div q:slot="codeExample">
149+
<Slot />
150+
</div>
151+
</PreviewCodeExample>
152+
);
153+
});
154+
155+
export const ManualBehaviorTabsExample = component$(() => {
156+
return (
157+
<PreviewCodeExample>
158+
<div q:slot="actualComponent" class="tabs-example mr-auto">
159+
<Tabs behavior="manual">
160+
<h3>Danish Composers</h3>
161+
<h4>(Hover over the tabs - they should not be selected)</h4>
162+
<TabList>
163+
<Tab>Maria Ahlefeldt</Tab>
164+
<Tab>Carl Andersen</Tab>
165+
<Tab>Ida Henriette da Fonseca</Tab>
166+
</TabList>
167+
<TabPanel>
168+
<p>
169+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
170+
a ...
171+
</p>
172+
</TabPanel>
173+
<TabPanel>
174+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
175+
</TabPanel>
176+
<TabPanel>
177+
<p>
178+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
179+
</p>
180+
</TabPanel>
181+
</Tabs>
182+
</div>
183+
184+
<div q:slot="codeExample">
185+
<Slot />
186+
</div>
187+
</PreviewCodeExample>
188+
);
189+
});
190+
191+
export const DynamicTabsExample = component$(() => {
192+
const tabsState = useStore([
193+
'Dynamic Tab 1',
194+
'Dynamic Tab 2',
195+
'Dynamic Tab 3',
196+
]);
197+
198+
return (
199+
<PreviewCodeExample>
200+
<div q:slot="actualComponent" class="tabs-example mr-auto">
201+
<Tabs>
202+
<TabList>
203+
{tabsState.map((tab) => (
204+
<Tab key={tab}>{tab}</Tab>
205+
))}
206+
</TabList>
207+
{tabsState.map((tab) => (
208+
<TabPanel key={tab}>{tab} Panel</TabPanel>
209+
))}
210+
</Tabs>
211+
212+
<button
213+
style={{ color: 'red', marginTop: '1rem' }}
214+
onClick$={() => {
215+
if (tabsState.length > 1) {
216+
tabsState.splice(0, 1);
217+
}
218+
}}
219+
>
220+
Remove First Tab
221+
</button>
222+
</div>
223+
224+
<div q:slot="codeExample">
225+
<Slot />
226+
</div>
227+
</PreviewCodeExample>
228+
);
229+
});
230+
231+
export const OnSelectedIndexChangeTabsExample = component$(() => {
232+
const selectedIndexSig = useSignal(0);
233+
234+
return (
235+
<PreviewCodeExample>
236+
<div q:slot="actualComponent" class="tabs-example mr-auto">
237+
<Tabs
238+
onSelectedIndexChange$={(index) => {
239+
selectedIndexSig.value = index;
240+
}}
241+
>
242+
<h3>Danish Composers</h3>
243+
<TabList>
244+
<Tab>Maria Ahlefeldt</Tab>
245+
<Tab>Carl Andersen</Tab>
246+
<Tab>Ida Henriette da Fonseca</Tab>
247+
</TabList>
248+
<TabPanel>
249+
<p>
250+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
251+
a ...
252+
</p>
253+
</TabPanel>
254+
<TabPanel>
255+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
256+
</TabPanel>
257+
<TabPanel>
258+
<p>
259+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
260+
</p>
261+
</TabPanel>
262+
</Tabs>
263+
264+
<p>Selected Index: {selectedIndexSig.value}</p>
265+
</div>
266+
267+
<div q:slot="codeExample">
268+
<Slot />
269+
</div>
270+
</PreviewCodeExample>
271+
);
272+
});
273+
274+
export const OnClickTabsExample = component$(() => {
275+
const tabsClickedCountSig = useSignal(0);
276+
277+
return (
278+
<PreviewCodeExample>
279+
<div q:slot="actualComponent" class="tabs-example mr-auto">
280+
<h3>Danish Composers</h3>
281+
<h4>(watch the counter below)</h4>
282+
<Tabs
283+
onClick$={() => {
284+
tabsClickedCountSig.value++;
285+
}}
286+
>
287+
<TabList>
288+
<Tab>Maria Ahlefeldt</Tab>
289+
<Tab>Carl Andersen</Tab>
290+
<Tab>Ida Henriette da Fonseca</Tab>
291+
</TabList>
292+
<TabPanel>
293+
<p>
294+
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
295+
a ...
296+
</p>
297+
</TabPanel>
298+
<TabPanel>
299+
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
300+
</TabPanel>
301+
<TabPanel>
302+
<p>
303+
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
304+
</p>
305+
</TabPanel>
306+
</Tabs>
307+
308+
<p>Click count: {tabsClickedCountSig.value}</p>
309+
</div>
310+
311+
<div q:slot="codeExample">
312+
<Slot />
313+
</div>
314+
</PreviewCodeExample>
315+
);
316+
});

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
.tabs-example [role='tab'] {
22
width: 250px;
3+
background: #ccc;
4+
color: black;
5+
}
6+
7+
.dark .tabs-example [role='tab'] {
38
background: #333;
9+
color: white;
10+
}
11+
12+
.dark .tabs-example [role='tab'][disabled] {
13+
background: #ebebeb;
14+
color: black;
15+
}
16+
17+
.dark .tabs-example [role='tab'].selected {
18+
background: #b7b5f5;
19+
color: black;
20+
}
21+
22+
.tabs-example [role='tab'][disabled] {
23+
background: #999;
424
}
525

626
.tabs-example [role='tab'].selected {
7-
background: gray;
27+
background: #0059c5;
28+
color: white;
829
}
930

1031
.tabs-example [role='tablist'] {

0 commit comments

Comments
 (0)