Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 850acca

Browse files
codebender828codebender828
committed
feat(tabs): add variants example
1 parent 55418b6 commit 850acca

File tree

6 files changed

+329
-41
lines changed

6 files changed

+329
-41
lines changed

‎modules/nuxt/playground/pages/tabs.vue

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,5 @@
1919

2020
<script lang="ts" setup>
2121
import { chakra } from "@chakra-ui/vue-next"
22-
// import {
23-
// CTabs,
24-
// CTabList,
25-
// CTab,
26-
// CTabPanel,
27-
// CTabPanels,
28-
// CTabIndicator,
29-
// } from "@chakra-ui/vue-next"
3022
const value = ref("two")
3123
</script>

‎packages/c-tabs/examples/simple-c-tabs.vue

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

‎packages/c-tabs/examples/simple-tabs.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue"
3+
import { chakra, CStack } from "../../vue/src"
4+
import {
5+
CTabs,
6+
CTabList,
7+
CTab,
8+
CTabPanel,
9+
CTabPanels,
10+
CTabIndicator,
11+
} from "../src"
12+
13+
const value = ref("two")
14+
</script>
15+
16+
<template>
17+
<chakra.div data-testid="simple-tabs-example">
18+
<c-stack>
19+
<c-heading size="md">Tabs - Basic</c-heading>
20+
<c-tabs v-model="value">
21+
<c-tab-list>
22+
<c-tab value="one"> Item One </c-tab>
23+
<c-tab value="two"> Item Two </c-tab>
24+
<c-tab value="three"> Item Three </c-tab>
25+
<c-tab-indicator />
26+
</c-tab-list>
27+
28+
<c-tab-panels>
29+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
30+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
31+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
32+
</c-tab-panels>
33+
</c-tabs>
34+
</c-stack>
35+
</chakra.div>
36+
</template>

‎packages/c-tabs/examples/with-size.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue"
3+
import {
4+
chakra,
5+
CSimpleGrid,
6+
CCode,
7+
CStack,
8+
CHeading,
9+
useColorModeValue,
10+
} from "../../vue/src"
11+
import {
12+
CTabs,
13+
CTabList,
14+
CTab,
15+
CTabPanel,
16+
CTabPanels,
17+
CTabIndicator,
18+
} from "../src"
19+
20+
const value = ref("two")
21+
22+
const sizes = ["sm", "md", "lg"]
23+
</script>
24+
25+
<template>
26+
<chakra.div data-testid="simple-tabs-example">
27+
<c-stack spacing="5">
28+
<c-heading size="md">Tabs - with size</c-heading>
29+
<c-simple-grid
30+
template-rows="auto auto"
31+
template-columns="auto auto"
32+
gap="4"
33+
>
34+
<c-stack
35+
v-for="size in sizes"
36+
spacing="5"
37+
rounded="8px"
38+
:border-color="
39+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
40+
"
41+
border-width="1px"
42+
border-style="solid"
43+
px="4"
44+
py="3"
45+
:key="size"
46+
>
47+
<c-heading as="h3" size="sm"
48+
><c-code font-size="md" font-weight="light">{{ size }}</c-code>
49+
</c-heading>
50+
<c-tabs v-model="value" :size="size" variant="line">
51+
<c-tab-list>
52+
<c-tab value="one"> Item One </c-tab>
53+
<c-tab value="two"> Item Two </c-tab>
54+
<c-tab value="three"> Item Three </c-tab>
55+
<c-tab-indicator />
56+
</c-tab-list>
57+
58+
<c-tab-panels>
59+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
60+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
61+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
62+
</c-tab-panels>
63+
</c-tabs>
64+
</c-stack>
65+
</c-simple-grid>
66+
</c-stack>
67+
</chakra.div>
68+
</template>

‎packages/c-tabs/examples/with-variants.vue

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue"
3+
import {
4+
chakra,
5+
CSimpleGrid,
6+
CCode,
7+
CStack,
8+
CHeading,
9+
useColorModeValue,
10+
} from "../../vue/src"
11+
import {
12+
CTabs,
13+
CTabList,
14+
CTab,
15+
CTabPanel,
16+
CTabPanels,
17+
CTabIndicator,
18+
} from "../src"
19+
20+
const value = ref("two")
21+
</script>
22+
23+
<template>
24+
<chakra.div data-testid="simple-tabs-example">
25+
<c-stack spacing="5">
26+
<c-heading size="md">Tabs - Basic</c-heading>
27+
<c-simple-grid
28+
template-rows="auto auto"
29+
template-columns="auto auto"
30+
gap="4"
31+
>
32+
<c-stack
33+
spacing="5"
34+
rounded="8px"
35+
:border-color="
36+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
37+
"
38+
border-width="1px"
39+
border-style="solid"
40+
px="4"
41+
py="3"
42+
>
43+
<c-heading as="h3" size="sm"
44+
><c-code font-size="md" font-weight="light">line</c-code> variant
45+
(default)</c-heading
46+
>
47+
<c-tabs v-model="value" variant="line">
48+
<c-tab-list>
49+
<c-tab value="one"> Item One </c-tab>
50+
<c-tab value="two"> Item Two </c-tab>
51+
<c-tab value="three"> Item Three </c-tab>
52+
<c-tab-indicator />
53+
</c-tab-list>
54+
55+
<c-tab-panels>
56+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
57+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
58+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
59+
</c-tab-panels>
60+
</c-tabs>
61+
</c-stack>
62+
63+
<c-stack
64+
spacing="5"
65+
rounded="8px"
66+
:border-color="
67+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
68+
"
69+
border-width="1px"
70+
border-style="solid"
71+
px="4"
72+
py="3"
73+
>
74+
<c-heading as="h3" size="sm"
75+
><c-code font-size="md" font-weight="light">enclosed</c-code>
76+
variant</c-heading
77+
>
78+
<c-tabs v-model="value" variant="enclosed">
79+
<c-tab-list>
80+
<c-tab value="one"> Item One </c-tab>
81+
<c-tab value="two"> Item Two </c-tab>
82+
<c-tab value="three"> Item Three </c-tab>
83+
<c-tab-indicator />
84+
</c-tab-list>
85+
86+
<c-tab-panels>
87+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
88+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
89+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
90+
</c-tab-panels>
91+
</c-tabs>
92+
</c-stack>
93+
94+
<c-stack
95+
spacing="5"
96+
rounded="8px"
97+
:border-color="
98+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
99+
"
100+
border-width="1px"
101+
border-style="solid"
102+
px="4"
103+
py="3"
104+
>
105+
<c-heading as="h3" size="sm"
106+
><c-code font-size="md" font-weight="light"
107+
>enclosed-colored</c-code
108+
>
109+
variant</c-heading
110+
>
111+
<c-tabs variant="enclosed-colored" v-model="value">
112+
<c-tab-list>
113+
<c-tab value="one"> Item One </c-tab>
114+
<c-tab value="two"> Item Two </c-tab>
115+
<c-tab value="three"> Item Three </c-tab>
116+
<c-tab-indicator />
117+
</c-tab-list>
118+
119+
<c-tab-panels>
120+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
121+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
122+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
123+
</c-tab-panels>
124+
</c-tabs>
125+
</c-stack>
126+
127+
<c-stack
128+
spacing="5"
129+
rounded="8px"
130+
:border-color="
131+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
132+
"
133+
border-width="1px"
134+
border-style="solid"
135+
px="4"
136+
py="3"
137+
>
138+
<c-heading as="h3" size="sm">
139+
<c-code font-size="md" font-weight="light">soft-rounded</c-code>
140+
variant
141+
</c-heading>
142+
<c-tabs v-model="value" variant="soft-rounded">
143+
<c-tab-list>
144+
<c-tab value="one"> Item One </c-tab>
145+
<c-tab value="two"> Item Two </c-tab>
146+
<c-tab value="three"> Item Three </c-tab>
147+
<c-tab-indicator />
148+
</c-tab-list>
149+
150+
<c-tab-panels>
151+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
152+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
153+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
154+
</c-tab-panels>
155+
</c-tabs>
156+
</c-stack>
157+
158+
<c-stack
159+
spacing="5"
160+
rounded="8px"
161+
:border-color="
162+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
163+
"
164+
border-width="1px"
165+
border-style="solid"
166+
px="4"
167+
py="3"
168+
>
169+
<c-heading as="h3" size="sm">
170+
<c-code font-size="md" font-weight="light">solid-rounded</c-code>
171+
variant
172+
</c-heading>
173+
<c-tabs v-model="value" variant="solid-rounded">
174+
<c-tab-list>
175+
<c-tab value="one"> Item One </c-tab>
176+
<c-tab value="two"> Item Two </c-tab>
177+
<c-tab value="three"> Item Three </c-tab>
178+
<c-tab-indicator />
179+
</c-tab-list>
180+
181+
<c-tab-panels>
182+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
183+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
184+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
185+
</c-tab-panels>
186+
</c-tabs>
187+
</c-stack>
188+
189+
<c-stack
190+
spacing="5"
191+
rounded="8px"
192+
:border-color="
193+
useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
194+
"
195+
border-width="1px"
196+
border-style="solid"
197+
px="4"
198+
py="3"
199+
>
200+
<c-heading as="h3" size="sm">
201+
<c-code font-size="md" font-weight="light">unstyled</c-code> variant
202+
</c-heading>
203+
<c-tabs v-model="value" variant="unstyled">
204+
<c-tab-list>
205+
<c-tab value="one"> Item One </c-tab>
206+
<c-tab value="two"> Item Two </c-tab>
207+
<c-tab value="three"> Item Three </c-tab>
208+
<c-tab-indicator />
209+
</c-tab-list>
210+
211+
<c-tab-panels>
212+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
213+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
214+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
215+
</c-tab-panels>
216+
</c-tabs>
217+
</c-stack>
218+
</c-simple-grid>
219+
</c-stack>
220+
</chakra.div>
221+
</template>

0 commit comments

Comments
 (0)