tutuca 0.9.39 → 0.9.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tutuca-cli.js +92 -39
- package/dist/tutuca-dev.js +18 -0
- package/dist/tutuca-dev.min.js +1 -1
- package/package.json +6 -7
- package/skill/immutable-js/SKILL.md +79 -0
- package/skill/immutable-js/references/collection.md +346 -0
- package/skill/immutable-js/references/conversions.md +99 -0
- package/skill/immutable-js/references/deep-updates.md +172 -0
- package/skill/immutable-js/references/equality.md +95 -0
- package/skill/immutable-js/references/list.md +266 -0
- package/skill/immutable-js/references/map.md +300 -0
- package/skill/immutable-js/references/predicates.md +93 -0
- package/skill/immutable-js/references/range-repeat.md +55 -0
- package/skill/immutable-js/references/record.md +196 -0
- package/skill/immutable-js/references/seq.md +248 -0
- package/skill/immutable-js/references/set.md +270 -0
- package/skill/immutable-js/references/shallow-functional.md +99 -0
- package/skill/immutable-js/references/stack.md +210 -0
- package/skill/margaui/SKILL.md +101 -0
- package/skill/margaui/components/accordion.md +127 -0
- package/skill/margaui/components/alert.md +174 -0
- package/skill/margaui/components/avatar.md +220 -0
- package/skill/margaui/components/badge.md +193 -0
- package/skill/margaui/components/breadcrumbs.md +103 -0
- package/skill/margaui/components/button.md +322 -0
- package/skill/margaui/components/calendar.md +67 -0
- package/skill/margaui/components/card.md +373 -0
- package/skill/margaui/components/carousel.md +387 -0
- package/skill/margaui/components/chat.md +171 -0
- package/skill/margaui/components/checkbox.md +101 -0
- package/skill/margaui/components/collapse.md +172 -0
- package/skill/margaui/components/countdown.md +165 -0
- package/skill/margaui/components/diff.md +53 -0
- package/skill/margaui/components/divider.md +107 -0
- package/skill/margaui/components/dock.md +173 -0
- package/skill/margaui/components/drawer.md +184 -0
- package/skill/margaui/components/dropdown.md +388 -0
- package/skill/margaui/components/fab.md +346 -0
- package/skill/margaui/components/fieldset.md +88 -0
- package/skill/margaui/components/file-input.md +84 -0
- package/skill/margaui/components/filter.md +52 -0
- package/skill/margaui/components/footer.md +583 -0
- package/skill/margaui/components/hero.md +135 -0
- package/skill/margaui/components/hover-3d.md +129 -0
- package/skill/margaui/components/hover-gallery.md +49 -0
- package/skill/margaui/components/indicator.md +265 -0
- package/skill/margaui/components/input.md +389 -0
- package/skill/margaui/components/join.md +100 -0
- package/skill/margaui/components/kbd.md +127 -0
- package/skill/margaui/components/label.md +102 -0
- package/skill/margaui/components/link.md +96 -0
- package/skill/margaui/components/list.md +182 -0
- package/skill/margaui/components/loading.md +105 -0
- package/skill/margaui/components/mask.md +168 -0
- package/skill/margaui/components/menu.md +856 -0
- package/skill/margaui/components/mockup-browser.md +39 -0
- package/skill/margaui/components/mockup-code.md +81 -0
- package/skill/margaui/components/mockup-phone.md +39 -0
- package/skill/margaui/components/mockup-window.md +33 -0
- package/skill/margaui/components/modal.md +178 -0
- package/skill/margaui/components/navbar.md +282 -0
- package/skill/margaui/components/pagination.md +122 -0
- package/skill/margaui/components/progress.md +135 -0
- package/skill/margaui/components/radial-progress.md +67 -0
- package/skill/margaui/components/radio.md +133 -0
- package/skill/margaui/components/range.md +134 -0
- package/skill/margaui/components/rating.md +170 -0
- package/skill/margaui/components/select.md +225 -0
- package/skill/margaui/components/skeleton.md +64 -0
- package/skill/margaui/components/stack.md +142 -0
- package/skill/margaui/components/stat.md +254 -0
- package/skill/margaui/components/status.md +73 -0
- package/skill/margaui/components/steps.md +138 -0
- package/skill/margaui/components/swap.md +152 -0
- package/skill/margaui/components/tab.md +248 -0
- package/skill/margaui/components/table.md +1018 -0
- package/skill/margaui/components/text-rotate.md +91 -0
- package/skill/margaui/components/textarea.md +85 -0
- package/skill/margaui/components/theme-controller.md +266 -0
- package/skill/margaui/components/timeline.md +1356 -0
- package/skill/margaui/components/toast.md +165 -0
- package/skill/margaui/components/toggle.md +135 -0
- package/skill/margaui/components/tooltip.md +181 -0
- package/skill/margaui/components/validator.md +163 -0
- package/skill/{advanced.md → tutuca/advanced.md} +5 -0
- package/skill/{cli.md → tutuca/cli.md} +17 -0
- package/skill/{core.md → tutuca/core.md} +5 -0
- /package/skill/{SKILL.md → tutuca/SKILL.md} +0 -0
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
# tab
|
|
2
|
+
|
|
3
|
+
_tabbed content (radio inputs or anchors)_
|
|
4
|
+
|
|
5
|
+
## What it does
|
|
6
|
+
|
|
7
|
+
Tab strip — radio-driven (CSS-only, supports content panels per tab) or anchor-driven (just visual styling).
|
|
8
|
+
|
|
9
|
+
## When to use
|
|
10
|
+
|
|
11
|
+
- Section switchers within a page.
|
|
12
|
+
|
|
13
|
+
## Core classes
|
|
14
|
+
|
|
15
|
+
`tabs`; style `tabs-box|border|lift`; size `tabs-xs|sm|md|lg|xl`; child `tab`, `tab-active`; content `tab-content`.
|
|
16
|
+
|
|
17
|
+
## Examples
|
|
18
|
+
|
|
19
|
+
### Radio tabs border — tab content
|
|
20
|
+
|
|
21
|
+
Source: `playground/components/tab/radio-tabs-border--tab-content.html`
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<!-- name of each tab group should be unique -->
|
|
25
|
+
<div class="tabs tabs-border">
|
|
26
|
+
<input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 1" />
|
|
27
|
+
<div class="tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
|
|
28
|
+
|
|
29
|
+
<input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 2" checked="checked" />
|
|
30
|
+
<div class="tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
|
|
31
|
+
|
|
32
|
+
<input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 3" />
|
|
33
|
+
<div class="tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Radio tabs box — tab content
|
|
38
|
+
|
|
39
|
+
Source: `playground/components/tab/radio-tabs-box--tab-content.html`
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<!-- name of each tab group should be unique -->
|
|
43
|
+
<div class="tabs tabs-box">
|
|
44
|
+
<input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 1" />
|
|
45
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
|
|
46
|
+
|
|
47
|
+
<input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 2" checked="checked" />
|
|
48
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
|
|
49
|
+
|
|
50
|
+
<input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 3" />
|
|
51
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
|
|
52
|
+
</div>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Radio tabs lift — tab content on bottom
|
|
56
|
+
|
|
57
|
+
Source: `playground/components/tab/radio-tabs-lift--tab-content-on-bottom.html`
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<!-- name of each tab group should be unique -->
|
|
61
|
+
<div class="tabs tabs-lift tabs-bottom">
|
|
62
|
+
<input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 1" />
|
|
63
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
|
|
64
|
+
|
|
65
|
+
<input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 2" checked="checked" />
|
|
66
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
|
|
67
|
+
|
|
68
|
+
<input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 3" />
|
|
69
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Radio tabs lift — tab content
|
|
74
|
+
|
|
75
|
+
Source: `playground/components/tab/radio-tabs-lift--tab-content.html`
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<!-- name of each tab group should be unique -->
|
|
79
|
+
<div class="tabs tabs-lift">
|
|
80
|
+
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 1" />
|
|
81
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
|
|
82
|
+
|
|
83
|
+
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 2" checked="checked" />
|
|
84
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
|
|
85
|
+
|
|
86
|
+
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 3" />
|
|
87
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
|
|
88
|
+
</div>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Radio tabs lift with icons — tab content
|
|
92
|
+
|
|
93
|
+
Source: `playground/components/tab/radio-tabs-lift-with-icons--tab-content.html`
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<!-- name of each tab group should be unique -->
|
|
97
|
+
<div class="tabs tabs-lift">
|
|
98
|
+
<label class="tab">
|
|
99
|
+
<input type="radio" name="my_tabs_4" />
|
|
100
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
|
|
101
|
+
Live
|
|
102
|
+
</label>
|
|
103
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
|
|
104
|
+
|
|
105
|
+
<label class="tab">
|
|
106
|
+
<input type="radio" name="my_tabs_4" checked="checked" />
|
|
107
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
|
|
108
|
+
Laugh
|
|
109
|
+
</label>
|
|
110
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
|
|
111
|
+
|
|
112
|
+
<label class="tab">
|
|
113
|
+
<input type="radio" name="my_tabs_4" />
|
|
114
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
|
|
115
|
+
Love
|
|
116
|
+
</label>
|
|
117
|
+
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
|
|
118
|
+
</div>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Sizes
|
|
122
|
+
|
|
123
|
+
Source: `playground/components/tab/sizes.html`
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
|
|
127
|
+
<div role="tablist" class="tabs tabs-lift tabs-xs">
|
|
128
|
+
<a role="tab" class="tab">Xsmall</a>
|
|
129
|
+
<a role="tab" class="tab tab-active">Xsmall</a>
|
|
130
|
+
<a role="tab" class="tab">Xsmall</a>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div role="tablist" class="tabs tabs-lift tabs-sm">
|
|
134
|
+
<a role="tab" class="tab">Small</a>
|
|
135
|
+
<a role="tab" class="tab tab-active">Small</a>
|
|
136
|
+
<a role="tab" class="tab">Small</a>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div role="tablist" class="tabs tabs-lift">
|
|
140
|
+
<a role="tab" class="tab">Medium</a>
|
|
141
|
+
<a role="tab" class="tab tab-active">Medium</a>
|
|
142
|
+
<a role="tab" class="tab">Medium</a>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div role="tablist" class="tabs tabs-lift tabs-lg">
|
|
146
|
+
<a role="tab" class="tab">Large</a>
|
|
147
|
+
<a role="tab" class="tab tab-active">Large</a>
|
|
148
|
+
<a role="tab" class="tab">Large</a>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div role="tablist" class="tabs tabs-lift tabs-xl">
|
|
152
|
+
<a role="tab" class="tab">Xlarge</a>
|
|
153
|
+
<a role="tab" class="tab tab-active">Xlarge</a>
|
|
154
|
+
<a role="tab" class="tab">Xlarge</a>
|
|
155
|
+
</div>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Tabs border
|
|
159
|
+
|
|
160
|
+
Source: `playground/components/tab/tabs-border.html`
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div role="tablist" class="tabs tabs-border">
|
|
164
|
+
<a role="tab" class="tab">Tab 1</a>
|
|
165
|
+
<a role="tab" class="tab tab-active">Tab 2</a>
|
|
166
|
+
<a role="tab" class="tab">Tab 3</a>
|
|
167
|
+
</div>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Tabs box using radio inputs
|
|
171
|
+
|
|
172
|
+
Source: `playground/components/tab/tabs-box-using-radio-inputs.html`
|
|
173
|
+
|
|
174
|
+
```html
|
|
175
|
+
<!-- name of each tab group should be unique -->
|
|
176
|
+
<div class="tabs tabs-box">
|
|
177
|
+
<input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1" />
|
|
178
|
+
<input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked" />
|
|
179
|
+
<input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 3" />
|
|
180
|
+
</div>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Tabs box with a horizontal scroll when theres no space
|
|
184
|
+
|
|
185
|
+
Source: `playground/components/tab/tabs-box-with-a-horizontal-scroll-when-theres-no-space.html`
|
|
186
|
+
|
|
187
|
+
```html
|
|
188
|
+
<div class="overflow-x-auto max-w-60">
|
|
189
|
+
<div class="tabs-lift tabs min-w-max">
|
|
190
|
+
<input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 1" />
|
|
191
|
+
<div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 1</div>
|
|
192
|
+
<input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 2" checked="checked" />
|
|
193
|
+
<div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 2</div>
|
|
194
|
+
<input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 3" />
|
|
195
|
+
<div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 3</div>
|
|
196
|
+
<input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 4" />
|
|
197
|
+
<div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 4</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### Tabs box
|
|
203
|
+
|
|
204
|
+
Source: `playground/components/tab/tabs-box.html`
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<div role="tablist" class="tabs tabs-box">
|
|
208
|
+
<a role="tab" class="tab">Tab 1</a>
|
|
209
|
+
<a role="tab" class="tab tab-active">Tab 2</a>
|
|
210
|
+
<a role="tab" class="tab">Tab 3</a>
|
|
211
|
+
</div>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### Tabs lift
|
|
215
|
+
|
|
216
|
+
Source: `playground/components/tab/tabs-lift.html`
|
|
217
|
+
|
|
218
|
+
```html
|
|
219
|
+
<div role="tablist" class="tabs tabs-lift">
|
|
220
|
+
<a role="tab" class="tab">Tab 1</a>
|
|
221
|
+
<a role="tab" class="tab tab-active">Tab 2</a>
|
|
222
|
+
<a role="tab" class="tab">Tab 3</a>
|
|
223
|
+
</div>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Tabs with custom color
|
|
227
|
+
|
|
228
|
+
Source: `playground/components/tab/tabs-with-custom-color.html`
|
|
229
|
+
|
|
230
|
+
```html
|
|
231
|
+
<div role="tablist" class="tabs tabs-lift">
|
|
232
|
+
<a role="tab" class="tab">Tab 1</a>
|
|
233
|
+
<a role="tab" class="tab tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
|
|
234
|
+
<a role="tab" class="tab">Tab 3</a>
|
|
235
|
+
</div>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Tabs
|
|
239
|
+
|
|
240
|
+
Source: `playground/components/tab/tabs.html`
|
|
241
|
+
|
|
242
|
+
```html
|
|
243
|
+
<div role="tablist" class="tabs">
|
|
244
|
+
<a role="tab" class="tab">Tab 1</a>
|
|
245
|
+
<a role="tab" class="tab tab-active">Tab 2</a>
|
|
246
|
+
<a role="tab" class="tab">Tab 3</a>
|
|
247
|
+
</div>
|
|
248
|
+
```
|