@vue-interface/btn-dropdown 2.0.0-beta.6 → 3.0.0
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/CHANGELOG.md +12 -0
- package/demo.css +4 -0
- package/docs/btn-dropdown.md +747 -0
- package/index.css +3 -0
- package/index.html +585 -0
- package/{dist/index.d.ts → index.ts} +4 -1
- package/package.json +18 -47
- package/src/BtnDropdown.vue +41 -0
- package/src/BtnDropdownSingle.vue +55 -0
- package/src/BtnDropdownSplit.vue +84 -0
- package/src/useDropdownHandler.ts +213 -0
- package/tsconfig.json +27 -0
- package/vite.config.js +52 -0
- package/dist/btn-dropdown.js +0 -1804
- package/dist/btn-dropdown.umd.cjs +0 -5
- package/dist/src/BtnDropdown.vue.d.ts +0 -9
- package/dist/src/BtnDropdownAction.vue.d.ts +0 -43
- package/dist/src/BtnDropdownSingle.vue.d.ts +0 -280
- package/dist/src/BtnDropdownSplit.vue.d.ts +0 -282
- package/dist/src/DropdownHandler.d.ts +0 -424
- package/dist/style.css +0 -1
|
@@ -0,0 +1,747 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Button Dropdown
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import '../demo.css';
|
|
7
|
+
import BtnDropdown from '../src/BtnDropdown.vue';
|
|
8
|
+
|
|
9
|
+
function onClickItem(e) {
|
|
10
|
+
console.log('clicked', e)
|
|
11
|
+
e.preventDefault()
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function onClick() {
|
|
15
|
+
console.log('action button clicked!')
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function onToggle() {
|
|
19
|
+
console.log('toggled')
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
# Button Dropdown
|
|
24
|
+
|
|
25
|
+
The `btn-dropdown` component provides an interactive button paired with a dropdown menu. It extends the standard [button](/packages/btn/docs/btn), [button-group](/packages/btn/docs/btn-group), and [dropdown-menu](/packages/dropdown-menu/docs/dropdown-menu) components.
|
|
26
|
+
|
|
27
|
+
## Basic Usage
|
|
28
|
+
|
|
29
|
+
<ClientOnly>
|
|
30
|
+
|
|
31
|
+
::: raw
|
|
32
|
+
<!-- #region basicUsage-->
|
|
33
|
+
<btn-dropdown label="Dropdown" @click-toggle="onToggle">
|
|
34
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
35
|
+
<a href="#">Another Action</a>
|
|
36
|
+
<hr>
|
|
37
|
+
<a href="#">Something else here</a>
|
|
38
|
+
</btn-dropdown>
|
|
39
|
+
<!-- #endregion basicUsage-->
|
|
40
|
+
:::
|
|
41
|
+
|
|
42
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#basicUsage{html}
|
|
43
|
+
|
|
44
|
+
### Split Button
|
|
45
|
+
|
|
46
|
+
Create a split `btn-dropdown` component by adding the `split` prop.
|
|
47
|
+
|
|
48
|
+
::: raw
|
|
49
|
+
<!-- #region split-->
|
|
50
|
+
<btn-dropdown label="Dropdown" @click-toggle="onToggle" split>
|
|
51
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
52
|
+
<a href="#">Another Action</a>
|
|
53
|
+
<hr>
|
|
54
|
+
<a href="#">Something else here</a>
|
|
55
|
+
</btn-dropdown>
|
|
56
|
+
<!-- #endregion split-->
|
|
57
|
+
:::
|
|
58
|
+
|
|
59
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#split{html}
|
|
60
|
+
|
|
61
|
+
::: tip
|
|
62
|
+
The split dropdown button is a combination of a [button-group](/packages/btn/docs/btn-group) button and a [dropdown-menu](/packages/dropdown-menu/docs/dropdown-menu).
|
|
63
|
+
:::
|
|
64
|
+
|
|
65
|
+
## Custom Buttons
|
|
66
|
+
|
|
67
|
+
::: raw
|
|
68
|
+
<div class="flex items-center gap-2">
|
|
69
|
+
<!-- #region custom1 -->
|
|
70
|
+
<btn-dropdown :caret="false" label="+" button-class="btn-primary rounded-full p-0 size-8" @click-toggle="onToggle">
|
|
71
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
72
|
+
<a href="#">Another Action</a>
|
|
73
|
+
<a href="#">Something else here</a>
|
|
74
|
+
</btn-dropdown>
|
|
75
|
+
<!-- #endregion custom1 -->
|
|
76
|
+
<!-- #region custom2 -->
|
|
77
|
+
<btn-dropdown>
|
|
78
|
+
<template #button="{ target, onBlur, onClickToggle, expanded }">
|
|
79
|
+
<button :ref="target" class="bg-gray-100 p-2 rounded-full outline-none active:ring-4 focus:ring-4 ring-blue-500/50" :class="{'rotate-z-90': expanded}" @blur="onBlur" @click="onClickToggle">
|
|
80
|
+
<svg version="1.0" class="w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
|
|
81
|
+
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000" stroke="none">
|
|
82
|
+
<path d="M570 3243 c-71 -12 -189 -60 -255 -104 -194 -130 -315 -353 -315
|
|
83
|
+
-580 0 -288 202 -567 473 -655 110 -36 263 -44 372 -19 341 76 582 414 536
|
|
84
|
+
754 -48 358 -338 615 -690 610 -53 -1 -107 -4 -121 -6z"/>
|
|
85
|
+
<path d="M2395 3234 c-243 -59 -452 -270 -509 -514 -20 -83 -20 -237 0 -320
|
|
86
|
+
45 -195 188 -372 369 -460 104 -51 187 -70 305 -70 118 0 201 19 305 70 137
|
|
87
|
+
66 249 178 315 315 51 104 70 187 70 305 0 118 -19 201 -70 305 -87 180 -253
|
|
88
|
+
316 -446 365 -93 24 -249 26 -339 4z"/>
|
|
89
|
+
<path d="M4254 3231 c-198 -54 -360 -186 -448 -366 -51 -104 -69 -183 -69
|
|
90
|
+
-305 0 -122 18 -201 69 -306 68 -139 186 -253 334 -323 204 -97 472 -77 664
|
|
91
|
+
49 190 124 316 355 316 580 0 290 -200 567 -474 656 -111 37 -287 43 -392 15z"/>
|
|
92
|
+
</g>
|
|
93
|
+
</svg>
|
|
94
|
+
</button>
|
|
95
|
+
</template>
|
|
96
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
97
|
+
<a href="#">Another Action</a>
|
|
98
|
+
<a href="#">Something else here</a>
|
|
99
|
+
</btn-dropdown>
|
|
100
|
+
<!-- #endregion custom2 -->
|
|
101
|
+
</div>
|
|
102
|
+
:::
|
|
103
|
+
|
|
104
|
+
::: details Show Code - (+)
|
|
105
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#custom1{html}
|
|
106
|
+
:::
|
|
107
|
+
|
|
108
|
+
::: details Show Code - Elipses
|
|
109
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#custom2{html}
|
|
110
|
+
:::
|
|
111
|
+
|
|
112
|
+
## Variants
|
|
113
|
+
|
|
114
|
+
::: raw
|
|
115
|
+
<div class="flex flex-wrap gap-2">
|
|
116
|
+
<!-- #region variants -->
|
|
117
|
+
<btn-dropdown label="Primary" variant="btn-primary">
|
|
118
|
+
<a href="#">Action</a>
|
|
119
|
+
<a href="#">Another Action</a>
|
|
120
|
+
<a href="#">Something else here</a>
|
|
121
|
+
</btn-dropdown>
|
|
122
|
+
<btn-dropdown label="Secondary" variant="btn-secondary">
|
|
123
|
+
<a href="#">Action</a>
|
|
124
|
+
<a href="#">Another Action</a>
|
|
125
|
+
<a href="#">Something else here</a>
|
|
126
|
+
</btn-dropdown>
|
|
127
|
+
<btn-dropdown label="Success" variant="btn-success">
|
|
128
|
+
<a href="#">Action</a>
|
|
129
|
+
<a href="#">Another Action</a>
|
|
130
|
+
<a href="#">Something else here</a>
|
|
131
|
+
</btn-dropdown>
|
|
132
|
+
<btn-dropdown label="Info" variant="btn-info">
|
|
133
|
+
<a href="#">Action</a>
|
|
134
|
+
<a href="#">Another Action</a>
|
|
135
|
+
<a href="#">Something else here</a>
|
|
136
|
+
</btn-dropdown>
|
|
137
|
+
<btn-dropdown label="Warning" variant="btn-warning">
|
|
138
|
+
<a href="#">Action</a>
|
|
139
|
+
<a href="#">Another Action</a>
|
|
140
|
+
<a href="#">Something else here</a>
|
|
141
|
+
</btn-dropdown>
|
|
142
|
+
<btn-dropdown label="Danger" variant="btn-danger">
|
|
143
|
+
<a href="#">Action</a>
|
|
144
|
+
<a href="#">Another Action</a>
|
|
145
|
+
<a href="#">Something else here</a>
|
|
146
|
+
</btn-dropdown>
|
|
147
|
+
<btn-dropdown label="Dark" variant="btn-dark">
|
|
148
|
+
<a href="#">Action</a>
|
|
149
|
+
<a href="#">Another Action</a>
|
|
150
|
+
<a href="#">Something else here</a>
|
|
151
|
+
</btn-dropdown>
|
|
152
|
+
<btn-dropdown label="Light" variant="btn-light">
|
|
153
|
+
<a href="#">Action</a>
|
|
154
|
+
<a href="#">Another Action</a>
|
|
155
|
+
<a href="#">Something else here</a>
|
|
156
|
+
</btn-dropdown>
|
|
157
|
+
<btn-dropdown label="Muted" variant="btn-muted">
|
|
158
|
+
<a href="#">Action</a>
|
|
159
|
+
<a href="#">Another Action</a>
|
|
160
|
+
<a href="#">Something else here</a>
|
|
161
|
+
</btn-dropdown>
|
|
162
|
+
<!-- #endregion variants -->
|
|
163
|
+
</div>
|
|
164
|
+
:::
|
|
165
|
+
|
|
166
|
+
::: details Show Code
|
|
167
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#variants{html}
|
|
168
|
+
:::
|
|
169
|
+
|
|
170
|
+
## Outline Variants
|
|
171
|
+
|
|
172
|
+
::: raw
|
|
173
|
+
<div class="flex flex-wrap gap-2">
|
|
174
|
+
<!-- #region outlineVariants -->
|
|
175
|
+
<btn-dropdown label="Primary" variant="btn-outline-primary" outline>
|
|
176
|
+
<a href="#">Action</a>
|
|
177
|
+
<a href="#">Another Action</a>
|
|
178
|
+
<a href="#">Something else here</a>
|
|
179
|
+
</btn-dropdown>
|
|
180
|
+
<btn-dropdown label="Secondary" variant="btn-outline-secondary" outline>
|
|
181
|
+
<a href="#">Action</a>
|
|
182
|
+
<a href="#">Another Action</a>
|
|
183
|
+
<a href="#">Something else here</a>
|
|
184
|
+
</btn-dropdown>
|
|
185
|
+
<btn-dropdown label="Success" variant="btn-outline-success" outline>
|
|
186
|
+
<a href="#">Action</a>
|
|
187
|
+
<a href="#">Another Action</a>
|
|
188
|
+
<a href="#">Something else here</a>
|
|
189
|
+
</btn-dropdown>
|
|
190
|
+
<btn-dropdown label="Info" variant="btn-outline-info" outline>
|
|
191
|
+
<a href="#">Action</a>
|
|
192
|
+
<a href="#">Another Action</a>
|
|
193
|
+
<a href="#">Something else here</a>
|
|
194
|
+
</btn-dropdown>
|
|
195
|
+
<btn-dropdown label="Warning" variant="btn-outline-warning" outline>
|
|
196
|
+
<a href="#">Action</a>
|
|
197
|
+
<a href="#">Another Action</a>
|
|
198
|
+
<a href="#">Something else here</a>
|
|
199
|
+
</btn-dropdown>
|
|
200
|
+
<btn-dropdown label="Danger" variant="btn-outline-danger" outline>
|
|
201
|
+
<a href="#">Action</a>
|
|
202
|
+
<a href="#">Another Action</a>
|
|
203
|
+
<a href="#">Something else here</a>
|
|
204
|
+
</btn-dropdown>
|
|
205
|
+
<btn-dropdown label="Dark" variant="btn-outline-dark" outline>
|
|
206
|
+
<a href="#">Action</a>
|
|
207
|
+
<a href="#">Another Action</a>
|
|
208
|
+
<a href="#">Something else here</a>
|
|
209
|
+
</btn-dropdown>
|
|
210
|
+
<btn-dropdown label="Light" variant="btn-outline-light" outline>
|
|
211
|
+
<a href="#">Action</a>
|
|
212
|
+
<a href="#">Another Action</a>
|
|
213
|
+
<a href="#">Something else here</a>
|
|
214
|
+
</btn-dropdown>
|
|
215
|
+
<btn-dropdown label="Muted" variant="btn-outline-muted" outline>
|
|
216
|
+
<a href="#">Action</a>
|
|
217
|
+
<a href="#">Another Action</a>
|
|
218
|
+
<a href="#">Something else here</a>
|
|
219
|
+
</btn-dropdown>
|
|
220
|
+
<!-- #endregion outlineVariants -->
|
|
221
|
+
</div>
|
|
222
|
+
:::
|
|
223
|
+
|
|
224
|
+
::: details Show Code
|
|
225
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#outlineVariants{html}
|
|
226
|
+
:::
|
|
227
|
+
|
|
228
|
+
## Split Button Variants
|
|
229
|
+
|
|
230
|
+
::: raw
|
|
231
|
+
<div class="flex flex-wrap gap-2">
|
|
232
|
+
<!-- #region splitVariants -->
|
|
233
|
+
<btn-dropdown label="Primary" variant="btn-primary" split>
|
|
234
|
+
<a href="#">Action</a>
|
|
235
|
+
<a href="#">Another Action</a>
|
|
236
|
+
<a href="#">Something else here</a>
|
|
237
|
+
</btn-dropdown>
|
|
238
|
+
<btn-dropdown label="Secondary" variant="btn-secondary" split>
|
|
239
|
+
<a href="#">Action</a>
|
|
240
|
+
<a href="#">Another Action</a>
|
|
241
|
+
<a href="#">Something else here</a>
|
|
242
|
+
</btn-dropdown>
|
|
243
|
+
<btn-dropdown label="Success" variant="btn-success" split>
|
|
244
|
+
<a href="#">Action</a>
|
|
245
|
+
<a href="#">Another Action</a>
|
|
246
|
+
<a href="#">Something else here</a>
|
|
247
|
+
</btn-dropdown>
|
|
248
|
+
<btn-dropdown label="Info" variant="btn-info" split>
|
|
249
|
+
<a href="#">Action</a>
|
|
250
|
+
<a href="#">Another Action</a>
|
|
251
|
+
<a href="#">Something else here</a>
|
|
252
|
+
</btn-dropdown>
|
|
253
|
+
<btn-dropdown label="Warning" variant="btn-warning" split>
|
|
254
|
+
<a href="#">Action</a>
|
|
255
|
+
<a href="#">Another Action</a>
|
|
256
|
+
<a href="#">Something else here</a>
|
|
257
|
+
</btn-dropdown>
|
|
258
|
+
<btn-dropdown label="Danger" variant="btn-danger" split>
|
|
259
|
+
<a href="#">Action</a>
|
|
260
|
+
<a href="#">Another Action</a>
|
|
261
|
+
<a href="#">Something else here</a>
|
|
262
|
+
</btn-dropdown>
|
|
263
|
+
<btn-dropdown label="Dark" variant="btn-dark" split>
|
|
264
|
+
<a href="#">Action</a>
|
|
265
|
+
<a href="#">Another Action</a>
|
|
266
|
+
<a href="#">Something else here</a>
|
|
267
|
+
</btn-dropdown>
|
|
268
|
+
<btn-dropdown label="Light" variant="btn-light" split>
|
|
269
|
+
<a href="#">Action</a>
|
|
270
|
+
<a href="#">Another Action</a>
|
|
271
|
+
<a href="#">Something else here</a>
|
|
272
|
+
</btn-dropdown>
|
|
273
|
+
<btn-dropdown label="Muted" variant="btn-muted" split>
|
|
274
|
+
<a href="#">Action</a>
|
|
275
|
+
<a href="#">Another Action</a>
|
|
276
|
+
<a href="#">Something else here</a>
|
|
277
|
+
</btn-dropdown>
|
|
278
|
+
<!-- #endregion splitVariants -->
|
|
279
|
+
</div>
|
|
280
|
+
:::
|
|
281
|
+
|
|
282
|
+
::: details Show Code
|
|
283
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#splitVariants{html}
|
|
284
|
+
:::
|
|
285
|
+
|
|
286
|
+
## Split Outline Variants
|
|
287
|
+
|
|
288
|
+
::: raw
|
|
289
|
+
<div class="flex flex-wrap gap-2">
|
|
290
|
+
<!-- #region splitOutlineVariants -->
|
|
291
|
+
<btn-dropdown label="Primary" variant="btn-outline-primary" outline split>
|
|
292
|
+
<a href="#">Action</a>
|
|
293
|
+
<a href="#">Another Action</a>
|
|
294
|
+
<a href="#">Something else here</a>
|
|
295
|
+
</btn-dropdown>
|
|
296
|
+
<btn-dropdown label="Secondary" variant="btn-outline-secondary" outline split>
|
|
297
|
+
<a href="#">Action</a>
|
|
298
|
+
<a href="#">Another Action</a>
|
|
299
|
+
<a href="#">Something else here</a>
|
|
300
|
+
</btn-dropdown>
|
|
301
|
+
<btn-dropdown label="Success" variant="btn-outline-success" outline split>
|
|
302
|
+
<a href="#">Action</a>
|
|
303
|
+
<a href="#">Another Action</a>
|
|
304
|
+
<a href="#">Something else here</a>
|
|
305
|
+
</btn-dropdown>
|
|
306
|
+
<btn-dropdown label="Info" variant="btn-outline-info" outline split>
|
|
307
|
+
<a href="#">Action</a>
|
|
308
|
+
<a href="#">Another Action</a>
|
|
309
|
+
<a href="#">Something else here</a>
|
|
310
|
+
</btn-dropdown>
|
|
311
|
+
<btn-dropdown label="Warning" variant="btn-outline-warning" outline split>
|
|
312
|
+
<a href="#">Action</a>
|
|
313
|
+
<a href="#">Another Action</a>
|
|
314
|
+
<a href="#">Something else here</a>
|
|
315
|
+
</btn-dropdown>
|
|
316
|
+
<btn-dropdown label="Danger" variant="btn-outline-danger" outline split>
|
|
317
|
+
<a href="#">Action</a>
|
|
318
|
+
<a href="#">Another Action</a>
|
|
319
|
+
<a href="#">Something else here</a>
|
|
320
|
+
</btn-dropdown>
|
|
321
|
+
<btn-dropdown label="Dark" variant="btn-outline-dark" outline split>
|
|
322
|
+
<a href="#">Action</a>
|
|
323
|
+
<a href="#">Another Action</a>
|
|
324
|
+
<a href="#">Something else here</a>
|
|
325
|
+
</btn-dropdown>
|
|
326
|
+
<btn-dropdown label="Light" variant="btn-outline-light" outline split>
|
|
327
|
+
<a href="#">Action</a>
|
|
328
|
+
<a href="#">Another Action</a>
|
|
329
|
+
<a href="#">Something else here</a>
|
|
330
|
+
</btn-dropdown>
|
|
331
|
+
<btn-dropdown label="Muted" variant="btn-outline-muted" outline split>
|
|
332
|
+
<a href="#">Action</a>
|
|
333
|
+
<a href="#">Another Action</a>
|
|
334
|
+
<a href="#">Something else here</a>
|
|
335
|
+
</btn-dropdown>
|
|
336
|
+
<!-- #endregion splitOutlineVariants -->
|
|
337
|
+
</div>
|
|
338
|
+
:::
|
|
339
|
+
|
|
340
|
+
::: details Show Code
|
|
341
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#splitOutlineVariants{html}
|
|
342
|
+
:::
|
|
343
|
+
|
|
344
|
+
## Sizes
|
|
345
|
+
|
|
346
|
+
Customize the size of a `btn-dropdown` component using a [predetermined size](#predetermined-sizes), [tailwind's numeric sizing classes](#tailwind-sizes), or an [arbitrary](#arbitrary-sizes) CSS length unit.
|
|
347
|
+
|
|
348
|
+
### Predetermined Sizes
|
|
349
|
+
|
|
350
|
+
The size can be customized using predetermined size classes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`. Use the syntax: `btn-group-[size]`.
|
|
351
|
+
|
|
352
|
+
::: raw
|
|
353
|
+
<div class="flex flex-wrap gap-2">
|
|
354
|
+
<!-- #region predetermined-->
|
|
355
|
+
<div>
|
|
356
|
+
<btn-dropdown label="xs" size="btn-group-xs" variant="btn-secondary">
|
|
357
|
+
<a href="#">Action</a>
|
|
358
|
+
<a href="#">Another Action</a>
|
|
359
|
+
<a href="#">Something else here</a>
|
|
360
|
+
</btn-dropdown>
|
|
361
|
+
</div>
|
|
362
|
+
<div>
|
|
363
|
+
<btn-dropdown label="sm" size="btn-group-sm" variant="btn-secondary">
|
|
364
|
+
<a href="#">Action</a>
|
|
365
|
+
<a href="#">Another Action</a>
|
|
366
|
+
<a href="#">Something else here</a>
|
|
367
|
+
</btn-dropdown>
|
|
368
|
+
</div>
|
|
369
|
+
<div>
|
|
370
|
+
<btn-dropdown label="md" size="btn-group-md" variant="btn-secondary">
|
|
371
|
+
<a href="#">Action</a>
|
|
372
|
+
<a href="#">Another Action</a>
|
|
373
|
+
<a href="#">Something else here</a>
|
|
374
|
+
</btn-dropdown>
|
|
375
|
+
</div>
|
|
376
|
+
<div>
|
|
377
|
+
<btn-dropdown label="lg" size="btn-group-lg" variant="btn-secondary">
|
|
378
|
+
<a href="#">Action</a>
|
|
379
|
+
<a href="#">Another Action</a>
|
|
380
|
+
<a href="#">Something else here</a>
|
|
381
|
+
</btn-dropdown>
|
|
382
|
+
</div>
|
|
383
|
+
<div>
|
|
384
|
+
<btn-dropdown label="xl" size="btn-group-xl" variant="btn-secondary">
|
|
385
|
+
<a href="#">Action</a>
|
|
386
|
+
<a href="#">Another Action</a>
|
|
387
|
+
<a href="#">Something else here</a>
|
|
388
|
+
</btn-dropdown>
|
|
389
|
+
</div>
|
|
390
|
+
<div>
|
|
391
|
+
<btn-dropdown label="2xl" size="btn-group-2xl" variant="btn-secondary">
|
|
392
|
+
<a href="#">Action</a>
|
|
393
|
+
<a href="#">Another Action</a>
|
|
394
|
+
<a href="#">Something else here</a>
|
|
395
|
+
</btn-dropdown>
|
|
396
|
+
</div>
|
|
397
|
+
<div>
|
|
398
|
+
<btn-dropdown label="3xl" size="btn-group-3xl" variant="btn-secondary">
|
|
399
|
+
<a href="#">Action</a>
|
|
400
|
+
<a href="#">Another Action</a>
|
|
401
|
+
<a href="#">Something else here</a>
|
|
402
|
+
</btn-dropdown>
|
|
403
|
+
</div>
|
|
404
|
+
<div>
|
|
405
|
+
<btn-dropdown label="4xl" size="btn-group-4xl" variant="btn-secondary">
|
|
406
|
+
<a href="#">Action</a>
|
|
407
|
+
<a href="#">Another Action</a>
|
|
408
|
+
<a href="#">Something else here</a>
|
|
409
|
+
</btn-dropdown>
|
|
410
|
+
</div>
|
|
411
|
+
<div>
|
|
412
|
+
<btn-dropdown label="5xl" size="btn-group-5xl" variant="btn-secondary">
|
|
413
|
+
<a href="#">Action</a>
|
|
414
|
+
<a href="#">Another Action</a>
|
|
415
|
+
<a href="#">Something else here</a>
|
|
416
|
+
</btn-dropdown>
|
|
417
|
+
</div>
|
|
418
|
+
<!-- #endregion predetermined -->
|
|
419
|
+
</div>
|
|
420
|
+
:::
|
|
421
|
+
|
|
422
|
+
::: details Show Code
|
|
423
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#predetermined{html}
|
|
424
|
+
:::
|
|
425
|
+
|
|
426
|
+
### Tailwind Sizes
|
|
427
|
+
|
|
428
|
+
For more granular control over button sizes, use Tailwind's numeric sizing scale classes: `btn-group-1` - `btn-group-96`.
|
|
429
|
+
|
|
430
|
+
::: raw
|
|
431
|
+
<div class="flex gap-2">
|
|
432
|
+
<!-- #region tailwind-->
|
|
433
|
+
<div>
|
|
434
|
+
<btn-dropdown label="btn-group-3" size="btn-group-3" variant="btn-secondary">
|
|
435
|
+
<a href="#">Action</a>
|
|
436
|
+
<a href="#">Another Action</a>
|
|
437
|
+
<a href="#">Something else here</a>
|
|
438
|
+
</btn-dropdown>
|
|
439
|
+
</div>
|
|
440
|
+
<div>
|
|
441
|
+
<btn-dropdown label="btn-group-4" size="btn-group-4" variant="btn-secondary">
|
|
442
|
+
<a href="#">Action</a>
|
|
443
|
+
<a href="#">Another Action</a>
|
|
444
|
+
<a href="#">Something else here</a>
|
|
445
|
+
</btn-dropdown>
|
|
446
|
+
</div>
|
|
447
|
+
<div>
|
|
448
|
+
<btn-dropdown label="btn-group-5" size="btn-group-5" variant="btn-secondary">
|
|
449
|
+
<a href="#">Action</a>
|
|
450
|
+
<a href="#">Another Action</a>
|
|
451
|
+
<a href="#">Something else here</a>
|
|
452
|
+
</btn-dropdown>
|
|
453
|
+
</div>
|
|
454
|
+
<!-- #endregion tailwind-->
|
|
455
|
+
</div>
|
|
456
|
+
:::
|
|
457
|
+
|
|
458
|
+
::: details Show Code
|
|
459
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#tailwind{html}
|
|
460
|
+
:::
|
|
461
|
+
|
|
462
|
+
### Arbitrary Sizes
|
|
463
|
+
|
|
464
|
+
For precise sizing, specify exact pixel values using the syntax `btn-group-[Npx]` or any other CSS length units (`rem`, `em`, `mm`, etc.).
|
|
465
|
+
|
|
466
|
+
::: raw
|
|
467
|
+
<div class="flex gap-2">
|
|
468
|
+
<!-- #region arbitrary-->
|
|
469
|
+
<div>
|
|
470
|
+
<btn-dropdown label="btn-group-[16px]" size="btn-group-[16px]" variant="btn-secondary">
|
|
471
|
+
<a href="#">Action</a>
|
|
472
|
+
<a href="#">Another Action</a>
|
|
473
|
+
<a href="#">Something else here</a>
|
|
474
|
+
</btn-dropdown>
|
|
475
|
+
</div>
|
|
476
|
+
<div>
|
|
477
|
+
<btn-dropdown label="btn-group-[1rem]" size="btn-group-[1rem]" variant="btn-secondary">
|
|
478
|
+
<a href="#">Action</a>
|
|
479
|
+
<a href="#">Another Action</a>
|
|
480
|
+
<a href="#">Something else here</a>
|
|
481
|
+
</btn-dropdown>
|
|
482
|
+
</div>
|
|
483
|
+
<!-- #endregion arbitrary-->
|
|
484
|
+
</div>
|
|
485
|
+
:::
|
|
486
|
+
|
|
487
|
+
::: details Show Code
|
|
488
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#arbitrary{html}
|
|
489
|
+
:::
|
|
490
|
+
|
|
491
|
+
## Split Sizes
|
|
492
|
+
|
|
493
|
+
Customize the size of a split `btn-dropdown` component using a [predetermined size](#predetermined-sizes), [tailwind's numeric sizing classes](#tailwind-sizes), or an [arbitrary](#arbitrary-sizes) CSS length unit.
|
|
494
|
+
|
|
495
|
+
### Predetermined Sizes
|
|
496
|
+
|
|
497
|
+
The size can be customized using predetermined size classes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`. Use the syntax: `btn-group-[size]`.
|
|
498
|
+
|
|
499
|
+
::: raw
|
|
500
|
+
<div class="flex flex-wrap gap-2">
|
|
501
|
+
<!-- #region splitPredetermined-->
|
|
502
|
+
<div>
|
|
503
|
+
<btn-dropdown label="xs" size="btn-group-xs" variant="btn-secondary" split>
|
|
504
|
+
<a href="#">Action</a>
|
|
505
|
+
<a href="#">Another Action</a>
|
|
506
|
+
<a href="#">Something else here</a>
|
|
507
|
+
</btn-dropdown>
|
|
508
|
+
</div>
|
|
509
|
+
<div>
|
|
510
|
+
<btn-dropdown label="sm" size="btn-group-sm" variant="btn-secondary" split>
|
|
511
|
+
<a href="#">Action</a>
|
|
512
|
+
<a href="#">Another Action</a>
|
|
513
|
+
<a href="#">Something else here</a>
|
|
514
|
+
</btn-dropdown>
|
|
515
|
+
</div>
|
|
516
|
+
<div>
|
|
517
|
+
<btn-dropdown label="md" size="btn-group-md" variant="btn-secondary" split>
|
|
518
|
+
<a href="#">Action</a>
|
|
519
|
+
<a href="#">Another Action</a>
|
|
520
|
+
<a href="#">Something else here</a>
|
|
521
|
+
</btn-dropdown>
|
|
522
|
+
</div>
|
|
523
|
+
<div>
|
|
524
|
+
<btn-dropdown label="lg" size="btn-group-lg" variant="btn-secondary" split>
|
|
525
|
+
<a href="#">Action</a>
|
|
526
|
+
<a href="#">Another Action</a>
|
|
527
|
+
<a href="#">Something else here</a>
|
|
528
|
+
</btn-dropdown>
|
|
529
|
+
</div>
|
|
530
|
+
<div>
|
|
531
|
+
<btn-dropdown label="xl" size="btn-group-xl" variant="btn-secondary" split>
|
|
532
|
+
<a href="#">Action</a>
|
|
533
|
+
<a href="#">Another Action</a>
|
|
534
|
+
<a href="#">Something else here</a>
|
|
535
|
+
</btn-dropdown>
|
|
536
|
+
</div>
|
|
537
|
+
<div>
|
|
538
|
+
<btn-dropdown label="2xl" size="btn-group-2xl" variant="btn-secondary" split>
|
|
539
|
+
<a href="#">Action</a>
|
|
540
|
+
<a href="#">Another Action</a>
|
|
541
|
+
<a href="#">Something else here</a>
|
|
542
|
+
</btn-dropdown>
|
|
543
|
+
</div>
|
|
544
|
+
<div>
|
|
545
|
+
<btn-dropdown label="3xl" size="btn-group-3xl" variant="btn-secondary" split>
|
|
546
|
+
<a href="#">Action</a>
|
|
547
|
+
<a href="#">Another Action</a>
|
|
548
|
+
<a href="#">Something else here</a>
|
|
549
|
+
</btn-dropdown>
|
|
550
|
+
</div>
|
|
551
|
+
<div>
|
|
552
|
+
<btn-dropdown label="4xl" size="btn-group-4xl" variant="btn-secondary" split>
|
|
553
|
+
<a href="#">Action</a>
|
|
554
|
+
<a href="#">Another Action</a>
|
|
555
|
+
<a href="#">Something else here</a>
|
|
556
|
+
</btn-dropdown>
|
|
557
|
+
</div>
|
|
558
|
+
<div>
|
|
559
|
+
<btn-dropdown label="5xl" size="btn-group-5xl" variant="btn-secondary" split>
|
|
560
|
+
<a href="#">Action</a>
|
|
561
|
+
<a href="#">Another Action</a>
|
|
562
|
+
<a href="#">Something else here</a>
|
|
563
|
+
</btn-dropdown>
|
|
564
|
+
</div>
|
|
565
|
+
<!-- #endregion splitPredetermined -->
|
|
566
|
+
</div>
|
|
567
|
+
:::
|
|
568
|
+
|
|
569
|
+
::: details Show Code
|
|
570
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#splitPredetermined{html}
|
|
571
|
+
:::
|
|
572
|
+
|
|
573
|
+
### Tailwind Sizes
|
|
574
|
+
|
|
575
|
+
For more granular control over button sizes, use Tailwind's numeric sizing scale classes: `btn-group-1` - `btn-group-96`.
|
|
576
|
+
|
|
577
|
+
::: raw
|
|
578
|
+
<div class="flex gap-2">
|
|
579
|
+
<!-- #region splitTailwind-->
|
|
580
|
+
<div>
|
|
581
|
+
<btn-dropdown label="btn-group-3" size="btn-group-3" variant="btn-secondary" split>
|
|
582
|
+
<a href="#">Action</a>
|
|
583
|
+
<a href="#">Another Action</a>
|
|
584
|
+
<a href="#">Something else here</a>
|
|
585
|
+
</btn-dropdown>
|
|
586
|
+
</div>
|
|
587
|
+
<div>
|
|
588
|
+
<btn-dropdown label="btn-group-4" size="btn-group-4" variant="btn-secondary" split>
|
|
589
|
+
<a href="#">Action</a>
|
|
590
|
+
<a href="#">Another Action</a>
|
|
591
|
+
<a href="#">Something else here</a>
|
|
592
|
+
</btn-dropdown>
|
|
593
|
+
</div>
|
|
594
|
+
<div>
|
|
595
|
+
<btn-dropdown label="btn-group-5" size="btn-group-5" variant="btn-secondary" split>
|
|
596
|
+
<a href="#">Action</a>
|
|
597
|
+
<a href="#">Another Action</a>
|
|
598
|
+
<a href="#">Something else here</a>
|
|
599
|
+
</btn-dropdown>
|
|
600
|
+
</div>
|
|
601
|
+
<!-- #endregion splitTailwind-->
|
|
602
|
+
</div>
|
|
603
|
+
:::
|
|
604
|
+
|
|
605
|
+
::: details Show Code
|
|
606
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#splitTailwind{html}
|
|
607
|
+
:::
|
|
608
|
+
|
|
609
|
+
### Arbitrary Sizes
|
|
610
|
+
|
|
611
|
+
For precise sizing, specify exact pixel values using the syntax `btn-group-[Npx]` or any other CSS length units (`rem`, `em`, `mm`, etc.).
|
|
612
|
+
|
|
613
|
+
|
|
614
|
+
::: raw
|
|
615
|
+
<div class="flex gap-2">
|
|
616
|
+
<!-- #region splitArbitrary-->
|
|
617
|
+
<div>
|
|
618
|
+
<btn-dropdown label="btn-group-[16px]" size="btn-group-[16px]" variant="btn-secondary" split>
|
|
619
|
+
<a href="#">Action</a>
|
|
620
|
+
<a href="#">Another Action</a>
|
|
621
|
+
<a href="#">Something else here</a>
|
|
622
|
+
</btn-dropdown>
|
|
623
|
+
</div>
|
|
624
|
+
<div>
|
|
625
|
+
<btn-dropdown label="btn-group-[1rem]" size="btn-group-[1rem]" variant="btn-secondary" split>
|
|
626
|
+
<a href="#">Action</a>
|
|
627
|
+
<a href="#">Another Action</a>
|
|
628
|
+
<a href="#">Something else here</a>
|
|
629
|
+
</btn-dropdown>
|
|
630
|
+
</div>
|
|
631
|
+
<!-- #endregion splitArbitrary-->
|
|
632
|
+
</div>
|
|
633
|
+
:::
|
|
634
|
+
|
|
635
|
+
::: details Show Code
|
|
636
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#splitArbitrary{html}
|
|
637
|
+
:::
|
|
638
|
+
|
|
639
|
+
## Menu Alignment
|
|
640
|
+
|
|
641
|
+
Customize the alignment of the dropdown menu relative to the button using the `align` prop. Use `start` value to align the left side of the menu to the button, and the `end` value to align right edge of the menu to the button.
|
|
642
|
+
|
|
643
|
+
::: raw
|
|
644
|
+
<div class="flex gap-2">
|
|
645
|
+
<!-- #region menuAlignment-->
|
|
646
|
+
<btn-dropdown align="start" label="Align Left" variant="btn-secondary">
|
|
647
|
+
<a href="#">Action</a>
|
|
648
|
+
<a href="#">Another Action</a>
|
|
649
|
+
<a href="#">Something else here</a>
|
|
650
|
+
</btn-dropdown>
|
|
651
|
+
<btn-dropdown align="start" label="Align Left (Split)" variant="btn-secondary" split>
|
|
652
|
+
<a href="#">Action</a>
|
|
653
|
+
<a href="#">Another Action</a>
|
|
654
|
+
<a href="#">Something else here</a>
|
|
655
|
+
</btn-dropdown>
|
|
656
|
+
<btn-dropdown align="end" label="Align Right" variant="btn-secondary">
|
|
657
|
+
<a href="#">Action</a>
|
|
658
|
+
<a href="#">Another Action</a>
|
|
659
|
+
<a href="#">Something else here</a>
|
|
660
|
+
</btn-dropdown>
|
|
661
|
+
<btn-dropdown align="end" label="Align Right (Split)" variant="btn-secondary" split>
|
|
662
|
+
<a href="#">Action</a>
|
|
663
|
+
<a href="#">Another Action</a>
|
|
664
|
+
<a href="#">Something else here</a>
|
|
665
|
+
</btn-dropdown>
|
|
666
|
+
<!-- #endregion menuAlignment-->
|
|
667
|
+
</div>
|
|
668
|
+
:::
|
|
669
|
+
|
|
670
|
+
::: details Show Code
|
|
671
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#menuAlignment{html}
|
|
672
|
+
:::
|
|
673
|
+
|
|
674
|
+
## Menu Direction Variations
|
|
675
|
+
|
|
676
|
+
Specify the direction of the dropdown menu using the [dropup](#dropup), [dropright](#dropright), or [dropleft](#dropleft) props.
|
|
677
|
+
|
|
678
|
+
### Dropup
|
|
679
|
+
|
|
680
|
+
::: raw
|
|
681
|
+
<div class="flex gap-2">
|
|
682
|
+
<!-- #region dropup-->
|
|
683
|
+
<btn-dropdown label="Dropup" variant="btn-secondary" dropup>
|
|
684
|
+
<a href="#">Action</a>
|
|
685
|
+
<a href="#">Another Action</a>
|
|
686
|
+
<a href="#">Something else here</a>
|
|
687
|
+
</btn-dropdown>
|
|
688
|
+
<btn-dropdown label="Dropup (Split)" variant="btn-secondary" dropup split>
|
|
689
|
+
<a href="#">Action</a>
|
|
690
|
+
<a href="#">Another Action</a>
|
|
691
|
+
<a href="#">Something else here</a>
|
|
692
|
+
</btn-dropdown>
|
|
693
|
+
<!-- #endregion dropup-->
|
|
694
|
+
</div>
|
|
695
|
+
:::
|
|
696
|
+
|
|
697
|
+
::: details Show Code
|
|
698
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#dropup{html}
|
|
699
|
+
:::
|
|
700
|
+
|
|
701
|
+
### Dropright
|
|
702
|
+
|
|
703
|
+
::: raw
|
|
704
|
+
<div class="flex gap-2">
|
|
705
|
+
<!-- #region dropright-->
|
|
706
|
+
<btn-dropdown label="Dropright" variant="btn-secondary" dropright>
|
|
707
|
+
<a href="#">Action</a>
|
|
708
|
+
<a href="#">Another Action</a>
|
|
709
|
+
<a href="#">Something else here</a>
|
|
710
|
+
</btn-dropdown>
|
|
711
|
+
<btn-dropdown label="Dropright (Split)" variant="btn-secondary" dropright split>
|
|
712
|
+
<a href="#">Action</a>
|
|
713
|
+
<a href="#">Another Action</a>
|
|
714
|
+
<a href="#">Something else here</a>
|
|
715
|
+
</btn-dropdown>
|
|
716
|
+
<!-- #endregion dropright-->
|
|
717
|
+
</div>
|
|
718
|
+
:::
|
|
719
|
+
|
|
720
|
+
::: details Show Code
|
|
721
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#dropright{html}
|
|
722
|
+
:::
|
|
723
|
+
|
|
724
|
+
### Dropleft
|
|
725
|
+
|
|
726
|
+
::: raw
|
|
727
|
+
<div class="flex gap-2">
|
|
728
|
+
<!-- #region dropleft-->
|
|
729
|
+
<btn-dropdown label="Dropleft" variant="btn-secondary" dropleft>
|
|
730
|
+
<a href="#">Action</a>
|
|
731
|
+
<a href="#">Another Action</a>
|
|
732
|
+
<a href="#">Something else here</a>
|
|
733
|
+
</btn-dropdown>
|
|
734
|
+
<btn-dropdown label="Dropleft (Split)" variant="btn-secondary" dropleft split>
|
|
735
|
+
<a href="#">Action</a>
|
|
736
|
+
<a href="#">Another Action</a>
|
|
737
|
+
<a href="#">Something else here</a>
|
|
738
|
+
</btn-dropdown>
|
|
739
|
+
<!-- #endregion dropleft-->
|
|
740
|
+
</div>
|
|
741
|
+
:::
|
|
742
|
+
|
|
743
|
+
</ClientOnly>
|
|
744
|
+
|
|
745
|
+
::: details Show Code
|
|
746
|
+
<<< @/packages/btn-dropdown/docs/btn-dropdown.md#dropleft{html}
|
|
747
|
+
:::
|