Skip to content

Commit 3b4cc6a

Browse files
shairezshairez
committed
docs(headless/tabs): finalize examples
1 parent bb3fb61 commit 3b4cc6a

File tree

6 files changed

+237
-151
lines changed

6 files changed

+237
-151
lines changed

‎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: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export const Example01 = component$(() => {
1515
return (
1616
<PreviewCodeExample>
1717
<div q:slot="actualComponent" class="tabs-example">
18+
<h3>Danish Composers</h3>
1819
<Tabs behavior="automatic">
19-
<h3 id="tablist-1">Danish Composers</h3>
2020
<TabList>
2121
<Tab>Maria Ahlefeldt</Tab>
2222
<Tab>Carl Andersen</Tab>
@@ -50,8 +50,9 @@ export const VerticalTabsExample = component$(() => {
5050
return (
5151
<PreviewCodeExample>
5252
<div q:slot="actualComponent" class="tabs-example mr-auto">
53-
<Tabs vertical>
54-
<h3 id="tablist-1">Danish Composers</h3>
53+
<h3>Danish Composers</h3>
54+
55+
<Tabs vertical class="flex flex-wrap gap-5">
5556
<TabList class="flex flex-col w-fit">
5657
<Tab>Maria Ahlefeldt</Tab>
5758
<Tab>Carl Andersen</Tab>
@@ -84,27 +85,26 @@ export const VerticalTabsExample = component$(() => {
8485
export const DisabledTabsExample = component$(() => {
8586
return (
8687
<PreviewCodeExample>
87-
<div q:slot="actualComponent" class="tabs-example mr-auto">
88+
<div q:slot="actualComponent" class="tabs-example mr-auto w-full">
89+
<h3>Dad jokes</h3>
8890
<Tabs>
89-
<h3 id="tablist-1">Danish Composers</h3>
9091
<TabList>
91-
<Tab disabled={true}>I'm a disabled tab</Tab>
92-
<Tab>Carl Andersen</Tab>
93-
<Tab>Ida Henriette da Fonseca</Tab>
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>
9498
</TabList>
9599
<TabPanel>
96-
<p>
97-
Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
98-
a ...
99-
</p>
100+
"What did the coffee report to the police", " A mugging."
100101
</TabPanel>
102+
<TabPanel>"What's brown and sticky", " A stick."</TabPanel>
101103
<TabPanel>
102-
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
104+
"How do the trees get on the internet?", "They log on."
103105
</TabPanel>
104106
<TabPanel>
105-
<p>
106-
Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
107-
</p>
107+
"What did the fish say when he hit the wall", " Dam."
108108
</TabPanel>
109109
</Tabs>
110110
</div>
@@ -116,47 +116,13 @@ export const DisabledTabsExample = component$(() => {
116116
);
117117
});
118118

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-
154119
export const AutomaticBehaviorTabsExample = component$(() => {
155120
return (
156121
<PreviewCodeExample>
157122
<div q:slot="actualComponent" class="tabs-example mr-auto">
158123
<Tabs behavior="automatic">
159-
<h3 id="tablist-1">Danish Composers</h3>
124+
<h3>Danish Composers</h3>
125+
<h4>(Hover over the tabs)</h4>
160126
<TabList>
161127
<Tab>Maria Ahlefeldt</Tab>
162128
<Tab>Carl Andersen</Tab>
@@ -190,8 +156,9 @@ export const ManualBehaviorTabsExample = component$(() => {
190156
return (
191157
<PreviewCodeExample>
192158
<div q:slot="actualComponent" class="tabs-example mr-auto">
193-
<Tabs behavior="automatic">
194-
<h3 id="tablist-1">Danish Composers</h3>
159+
<Tabs behavior="manual">
160+
<h3>Danish Composers</h3>
161+
<h4>(Hover over the tabs - they should not be selected)</h4>
195162
<TabList>
196163
<Tab>Maria Ahlefeldt</Tab>
197164
<Tab>Carl Andersen</Tab>
@@ -221,19 +188,58 @@ export const ManualBehaviorTabsExample = component$(() => {
221188
);
222189
});
223190

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+
224231
export const OnSelectedIndexChangeTabsExample = component$(() => {
225232
const selectedIndexSig = useSignal(0);
226233

227234
return (
228235
<PreviewCodeExample>
229236
<div q:slot="actualComponent" class="tabs-example mr-auto">
230237
<Tabs
231-
selectedIndex={selectedIndexSig.value}
232-
onSelectedIndexChange$={(e) => {
233-
selectedIndexSig.value = e;
238+
onSelectedIndexChange$={(index) => {
239+
selectedIndexSig.value = index;
234240
}}
235241
>
236-
<h3 id="tablist-1">Danish Composers</h3>
242+
<h3>Danish Composers</h3>
237243
<TabList>
238244
<Tab>Maria Ahlefeldt</Tab>
239245
<Tab>Carl Andersen</Tab>
@@ -271,12 +277,13 @@ export const OnClickTabsExample = component$(() => {
271277
return (
272278
<PreviewCodeExample>
273279
<div q:slot="actualComponent" class="tabs-example mr-auto">
280+
<h3>Danish Composers</h3>
281+
<h4>(watch the counter below)</h4>
274282
<Tabs
275283
onClick$={() => {
276284
tabsClickedCountSig.value++;
277285
}}
278286
>
279-
<h3 id="tablist-1">Danish Composers</h3>
280287
<TabList>
281288
<Tab>Maria Ahlefeldt</Tab>
282289
<Tab>Carl Andersen</Tab>

‎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)