@vue-interface/btn-dropdown 2.0.0-beta.9 → 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 -42
- 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 -1853
- 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 -236
- package/dist/src/BtnDropdownSplit.vue.d.ts +0 -238
- package/dist/src/DropdownHandler.d.ts +0 -463
- package/dist/style.css +0 -1
package/index.css
ADDED
package/index.html
ADDED
|
@@ -0,0 +1,585 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<title>BtnDropdown</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body class="bg-white dark:bg-neutral-900 text-black dark:text-white">
|
|
9
|
+
<div id="app" class="container max-w-screen-lg mx-auto pb-12">
|
|
10
|
+
<h1 class="text-4xl mb-5">btn-dropdown</h1>
|
|
11
|
+
|
|
12
|
+
<h2 class="text-2xl mb-3">Basic Usage</h2>
|
|
13
|
+
|
|
14
|
+
<btn-dropdown label="Dropdown" @click-toggle="onToggle">
|
|
15
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
16
|
+
<a href="#">Another Action</a>
|
|
17
|
+
<hr>
|
|
18
|
+
<a href="#">Something else here</a>
|
|
19
|
+
</btn-dropdown>
|
|
20
|
+
|
|
21
|
+
<h2 class="text-2xl mt-6 mb-3">Split Button</h2>
|
|
22
|
+
|
|
23
|
+
<div class="flex items-center gap-2">
|
|
24
|
+
<btn-dropdown label="Dropdown" split @click="onClick" @click-toggle="onToggle">
|
|
25
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
26
|
+
<a href="#">Another Action</a>
|
|
27
|
+
<hr>
|
|
28
|
+
<a href="#">Something else here</a>
|
|
29
|
+
</btn-dropdown>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<h2 class="text-2xl mt-6 mb-3">Custom Buttons</h2>
|
|
33
|
+
|
|
34
|
+
<div class="flex items-center gap-2">
|
|
35
|
+
<btn-dropdown :caret="false" label="+" button-class="btn-primary rounded-full p-0 size-8" @click-toggle="onToggle">
|
|
36
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
37
|
+
<a href="#">Another Action</a>
|
|
38
|
+
<a href="#">Something else here</a>
|
|
39
|
+
</btn-dropdown>
|
|
40
|
+
|
|
41
|
+
<btn-dropdown>
|
|
42
|
+
<template #button="{ target, onBlur, onClickToggle, expanded }">
|
|
43
|
+
<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">
|
|
44
|
+
<svg version="1.0" class="w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
|
|
45
|
+
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000" stroke="none">
|
|
46
|
+
<path d="M570 3243 c-71 -12 -189 -60 -255 -104 -194 -130 -315 -353 -315
|
|
47
|
+
-580 0 -288 202 -567 473 -655 110 -36 263 -44 372 -19 341 76 582 414 536
|
|
48
|
+
754 -48 358 -338 615 -690 610 -53 -1 -107 -4 -121 -6z"/>
|
|
49
|
+
<path d="M2395 3234 c-243 -59 -452 -270 -509 -514 -20 -83 -20 -237 0 -320
|
|
50
|
+
45 -195 188 -372 369 -460 104 -51 187 -70 305 -70 118 0 201 19 305 70 137
|
|
51
|
+
66 249 178 315 315 51 104 70 187 70 305 0 118 -19 201 -70 305 -87 180 -253
|
|
52
|
+
316 -446 365 -93 24 -249 26 -339 4z"/>
|
|
53
|
+
<path d="M4254 3231 c-198 -54 -360 -186 -448 -366 -51 -104 -69 -183 -69
|
|
54
|
+
-305 0 -122 18 -201 69 -306 68 -139 186 -253 334 -323 204 -97 472 -77 664
|
|
55
|
+
49 190 124 316 355 316 580 0 290 -200 567 -474 656 -111 37 -287 43 -392 15z"/>
|
|
56
|
+
</g>
|
|
57
|
+
</svg>
|
|
58
|
+
</button>
|
|
59
|
+
</template>
|
|
60
|
+
<a href="#/test" @click="onClickItem">Action</a>
|
|
61
|
+
<a href="#">Another Action</a>
|
|
62
|
+
<a href="#">Something else here</a>
|
|
63
|
+
</btn-dropdown>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<h2 class="text-2xl mt-6 mb-3">Variants</h2>
|
|
67
|
+
|
|
68
|
+
<div class="flex gap-2">
|
|
69
|
+
<btn-dropdown label="Primary" variant="btn-primary">
|
|
70
|
+
<a href="#">Action</a>
|
|
71
|
+
<a href="#">Another Action</a>
|
|
72
|
+
<a href="#">Something else here</a>
|
|
73
|
+
</btn-dropdown>
|
|
74
|
+
|
|
75
|
+
<btn-dropdown label="Secondary" variant="btn-secondary">
|
|
76
|
+
<a href="#">Action</a>
|
|
77
|
+
<a href="#">Another Action</a>
|
|
78
|
+
<a href="#">Something else here</a>
|
|
79
|
+
</btn-dropdown>
|
|
80
|
+
|
|
81
|
+
<btn-dropdown label="Success" variant="btn-success">
|
|
82
|
+
<a href="#">Action</a>
|
|
83
|
+
<a href="#">Another Action</a>
|
|
84
|
+
<a href="#">Something else here</a>
|
|
85
|
+
</btn-dropdown>
|
|
86
|
+
|
|
87
|
+
<btn-dropdown label="Info" variant="btn-info">
|
|
88
|
+
<a href="#">Action</a>
|
|
89
|
+
<a href="#">Another Action</a>
|
|
90
|
+
<a href="#">Something else here</a>
|
|
91
|
+
</btn-dropdown>
|
|
92
|
+
|
|
93
|
+
<btn-dropdown label="Warning" variant="btn-warning">
|
|
94
|
+
<a href="#">Action</a>
|
|
95
|
+
<a href="#">Another Action</a>
|
|
96
|
+
<a href="#">Something else here</a>
|
|
97
|
+
</btn-dropdown>
|
|
98
|
+
|
|
99
|
+
<btn-dropdown label="Danger" variant="btn-danger">
|
|
100
|
+
<a href="#">Action</a>
|
|
101
|
+
<a href="#">Another Action</a>
|
|
102
|
+
<a href="#">Something else here</a>
|
|
103
|
+
</btn-dropdown>
|
|
104
|
+
|
|
105
|
+
<btn-dropdown label="Dark" variant="btn-dark">
|
|
106
|
+
<a href="#">Action</a>
|
|
107
|
+
<a href="#">Another Action</a>
|
|
108
|
+
<a href="#">Something else here</a>
|
|
109
|
+
</btn-dropdown>
|
|
110
|
+
|
|
111
|
+
<btn-dropdown label="Light" variant="btn-light">
|
|
112
|
+
<a href="#">Action</a>
|
|
113
|
+
<a href="#">Another Action</a>
|
|
114
|
+
<a href="#">Something else here</a>
|
|
115
|
+
</btn-dropdown>
|
|
116
|
+
|
|
117
|
+
<btn-dropdown label="Muted" variant="btn-muted">
|
|
118
|
+
<a href="#">Action</a>
|
|
119
|
+
<a href="#">Another Action</a>
|
|
120
|
+
<a href="#">Something else here</a>
|
|
121
|
+
</btn-dropdown>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<h2 class="text-2xl mt-6 mb-3">Outline Variants</h2>
|
|
125
|
+
|
|
126
|
+
<div class="flex gap-2">
|
|
127
|
+
<btn-dropdown label="Primary" variant="btn-outline-primary" outline>
|
|
128
|
+
<a href="#">Action</a>
|
|
129
|
+
<a href="#">Another Action</a>
|
|
130
|
+
<a href="#">Something else here</a>
|
|
131
|
+
</btn-dropdown>
|
|
132
|
+
|
|
133
|
+
<btn-dropdown label="Secondary" variant="btn-outline-secondary" outline>
|
|
134
|
+
<a href="#">Action</a>
|
|
135
|
+
<a href="#">Another Action</a>
|
|
136
|
+
<a href="#">Something else here</a>
|
|
137
|
+
</btn-dropdown>
|
|
138
|
+
|
|
139
|
+
<btn-dropdown label="Success" variant="btn-outline-success" outline>
|
|
140
|
+
<a href="#">Action</a>
|
|
141
|
+
<a href="#">Another Action</a>
|
|
142
|
+
<a href="#">Something else here</a>
|
|
143
|
+
</btn-dropdown>
|
|
144
|
+
|
|
145
|
+
<btn-dropdown label="Info" variant="btn-outline-info" outline>
|
|
146
|
+
<a href="#">Action</a>
|
|
147
|
+
<a href="#">Another Action</a>
|
|
148
|
+
<a href="#">Something else here</a>
|
|
149
|
+
</btn-dropdown>
|
|
150
|
+
|
|
151
|
+
<btn-dropdown label="Warning" variant="btn-outline-warning" outline>
|
|
152
|
+
<a href="#">Action</a>
|
|
153
|
+
<a href="#">Another Action</a>
|
|
154
|
+
<a href="#">Something else here</a>
|
|
155
|
+
</btn-dropdown>
|
|
156
|
+
|
|
157
|
+
<btn-dropdown label="Danger" variant="btn-outline-danger" outline>
|
|
158
|
+
<a href="#">Action</a>
|
|
159
|
+
<a href="#">Another Action</a>
|
|
160
|
+
<a href="#">Something else here</a>
|
|
161
|
+
</btn-dropdown>
|
|
162
|
+
|
|
163
|
+
<btn-dropdown label="Dark" variant="btn-outline-dark" outline>
|
|
164
|
+
<a href="#">Action</a>
|
|
165
|
+
<a href="#">Another Action</a>
|
|
166
|
+
<a href="#">Something else here</a>
|
|
167
|
+
</btn-dropdown>
|
|
168
|
+
|
|
169
|
+
<btn-dropdown label="Light" variant="btn-outline-light" outline>
|
|
170
|
+
<a href="#">Action</a>
|
|
171
|
+
<a href="#">Another Action</a>
|
|
172
|
+
<a href="#">Something else here</a>
|
|
173
|
+
</btn-dropdown>
|
|
174
|
+
|
|
175
|
+
<btn-dropdown label="Muted" variant="btn-outline-muted" outline>
|
|
176
|
+
<a href="#">Action</a>
|
|
177
|
+
<a href="#">Another Action</a>
|
|
178
|
+
<a href="#">Something else here</a>
|
|
179
|
+
</btn-dropdown>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<h2 class="text-2xl mt-6 mb-3">Split Button Variants</h2>
|
|
183
|
+
|
|
184
|
+
<div class="flex gap-2">
|
|
185
|
+
<btn-dropdown label="Primary" variant="btn-primary" split>
|
|
186
|
+
<a href="#">Action</a>
|
|
187
|
+
<a href="#">Another Action</a>
|
|
188
|
+
<a href="#">Something else here</a>
|
|
189
|
+
</btn-dropdown>
|
|
190
|
+
|
|
191
|
+
<btn-dropdown label="Secondary" variant="btn-secondary" split>
|
|
192
|
+
<a href="#">Action</a>
|
|
193
|
+
<a href="#">Another Action</a>
|
|
194
|
+
<a href="#">Something else here</a>
|
|
195
|
+
</btn-dropdown>
|
|
196
|
+
|
|
197
|
+
<btn-dropdown label="Success" variant="btn-success" split>
|
|
198
|
+
<a href="#">Action</a>
|
|
199
|
+
<a href="#">Another Action</a>
|
|
200
|
+
<a href="#">Something else here</a>
|
|
201
|
+
</btn-dropdown>
|
|
202
|
+
|
|
203
|
+
<btn-dropdown label="Info" variant="btn-info" split>
|
|
204
|
+
<a href="#">Action</a>
|
|
205
|
+
<a href="#">Another Action</a>
|
|
206
|
+
<a href="#">Something else here</a>
|
|
207
|
+
</btn-dropdown>
|
|
208
|
+
|
|
209
|
+
<btn-dropdown label="Warning" variant="btn-warning" split>
|
|
210
|
+
<a href="#">Action</a>
|
|
211
|
+
<a href="#">Another Action</a>
|
|
212
|
+
<a href="#">Something else here</a>
|
|
213
|
+
</btn-dropdown>
|
|
214
|
+
|
|
215
|
+
<btn-dropdown label="Danger" variant="btn-danger" split>
|
|
216
|
+
<a href="#">Action</a>
|
|
217
|
+
<a href="#">Another Action</a>
|
|
218
|
+
<a href="#">Something else here</a>
|
|
219
|
+
</btn-dropdown>
|
|
220
|
+
|
|
221
|
+
<btn-dropdown label="Dark" variant="btn-dark" split>
|
|
222
|
+
<a href="#">Action</a>
|
|
223
|
+
<a href="#">Another Action</a>
|
|
224
|
+
<a href="#">Something else here</a>
|
|
225
|
+
</btn-dropdown>
|
|
226
|
+
|
|
227
|
+
<btn-dropdown label="Light" variant="btn-light" split>
|
|
228
|
+
<a href="#">Action</a>
|
|
229
|
+
<a href="#">Another Action</a>
|
|
230
|
+
<a href="#">Something else here</a>
|
|
231
|
+
</btn-dropdown>
|
|
232
|
+
|
|
233
|
+
<btn-dropdown label="Muted" variant="btn-muted" split>
|
|
234
|
+
<a href="#">Action</a>
|
|
235
|
+
<a href="#">Another Action</a>
|
|
236
|
+
<a href="#">Something else here</a>
|
|
237
|
+
</btn-dropdown>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<h2 class="text-2xl mt-6 mb-3">Split Outline Buttons</h2>
|
|
241
|
+
|
|
242
|
+
<div class="flex gap-2">
|
|
243
|
+
<btn-dropdown label="Primary" variant="btn-outline-primary" outline split>
|
|
244
|
+
<a href="#">Action</a>
|
|
245
|
+
<a href="#">Another Action</a>
|
|
246
|
+
<a href="#">Something else here</a>
|
|
247
|
+
</btn-dropdown>
|
|
248
|
+
|
|
249
|
+
<btn-dropdown label="Secondary" variant="btn-outline-secondary" outline split>
|
|
250
|
+
<a href="#">Action</a>
|
|
251
|
+
<a href="#">Another Action</a>
|
|
252
|
+
<a href="#">Something else here</a>
|
|
253
|
+
</btn-dropdown>
|
|
254
|
+
|
|
255
|
+
<btn-dropdown label="Success" variant="btn-outline-success" outline split>
|
|
256
|
+
<a href="#">Action</a>
|
|
257
|
+
<a href="#">Another Action</a>
|
|
258
|
+
<a href="#">Something else here</a>
|
|
259
|
+
</btn-dropdown>
|
|
260
|
+
|
|
261
|
+
<btn-dropdown label="Info" variant="btn-outline-info" outline split>
|
|
262
|
+
<a href="#">Action</a>
|
|
263
|
+
<a href="#">Another Action</a>
|
|
264
|
+
<a href="#">Something else here</a>
|
|
265
|
+
</btn-dropdown>
|
|
266
|
+
|
|
267
|
+
<btn-dropdown label="Warning" variant="btn-outline-warning" outline split>
|
|
268
|
+
<a href="#">Action</a>
|
|
269
|
+
<a href="#">Another Action</a>
|
|
270
|
+
<a href="#">Something else here</a>
|
|
271
|
+
</btn-dropdown>
|
|
272
|
+
|
|
273
|
+
<btn-dropdown label="Danger" variant="btn-outline-danger" outline split>
|
|
274
|
+
<a href="#">Action</a>
|
|
275
|
+
<a href="#">Another Action</a>
|
|
276
|
+
<a href="#">Something else here</a>
|
|
277
|
+
</btn-dropdown>
|
|
278
|
+
|
|
279
|
+
<btn-dropdown label="Dark" variant="btn-outline-dark" outline split>
|
|
280
|
+
<a href="#">Action</a>
|
|
281
|
+
<a href="#">Another Action</a>
|
|
282
|
+
<a href="#">Something else here</a>
|
|
283
|
+
</btn-dropdown>
|
|
284
|
+
|
|
285
|
+
<btn-dropdown label="Light" variant="btn-outline-light" outline split>
|
|
286
|
+
<a href="#">Action</a>
|
|
287
|
+
<a href="#">Another Action</a>
|
|
288
|
+
<a href="#">Something else here</a>
|
|
289
|
+
</btn-dropdown>
|
|
290
|
+
|
|
291
|
+
<btn-dropdown label="Muted" variant="btn-outline-muted" outline split>
|
|
292
|
+
<a href="#">Action</a>
|
|
293
|
+
<a href="#">Another Action</a>
|
|
294
|
+
<a href="#">Something else here</a>
|
|
295
|
+
</btn-dropdown>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<h2 class="text-2xl mt-6 mb-3">Button Sizes</h2>
|
|
299
|
+
|
|
300
|
+
<div class="flex gap-2">
|
|
301
|
+
<div>
|
|
302
|
+
<btn-dropdown label="xs" size="btn-group-xs" variant="btn-secondary">
|
|
303
|
+
<a href="#">Action</a>
|
|
304
|
+
<a href="#">Another Action</a>
|
|
305
|
+
<a href="#">Something else here</a>
|
|
306
|
+
</btn-dropdown>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div>
|
|
310
|
+
<btn-dropdown label="sm" size="btn-group-sm" variant="btn-secondary">
|
|
311
|
+
<a href="#">Action</a>
|
|
312
|
+
<a href="#">Another Action</a>
|
|
313
|
+
<a href="#">Something else here</a>
|
|
314
|
+
</btn-dropdown>
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
<div>
|
|
318
|
+
<btn-dropdown label="md" size="btn-group-md" variant="btn-secondary">
|
|
319
|
+
<a href="#">Action</a>
|
|
320
|
+
<a href="#">Another Action</a>
|
|
321
|
+
<a href="#">Something else here</a>
|
|
322
|
+
</btn-dropdown>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
<div>
|
|
326
|
+
<btn-dropdown label="lg" size="btn-group-lg" variant="btn-secondary">
|
|
327
|
+
<a href="#">Action</a>
|
|
328
|
+
<a href="#">Another Action</a>
|
|
329
|
+
<a href="#">Something else here</a>
|
|
330
|
+
</btn-dropdown>
|
|
331
|
+
</div>
|
|
332
|
+
|
|
333
|
+
<div>
|
|
334
|
+
<btn-dropdown label="xl" size="btn-group-xl" variant="btn-secondary">
|
|
335
|
+
<a href="#">Action</a>
|
|
336
|
+
<a href="#">Another Action</a>
|
|
337
|
+
<a href="#">Something else here</a>
|
|
338
|
+
</btn-dropdown>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div>
|
|
342
|
+
<btn-dropdown label="2xl" size="btn-group-2xl" variant="btn-secondary">
|
|
343
|
+
<a href="#">Action</a>
|
|
344
|
+
<a href="#">Another Action</a>
|
|
345
|
+
<a href="#">Something else here</a>
|
|
346
|
+
</btn-dropdown>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<div>
|
|
350
|
+
<btn-dropdown label="3xl" size="btn-group-3xl" variant="btn-secondary">
|
|
351
|
+
<a href="#">Action</a>
|
|
352
|
+
<a href="#">Another Action</a>
|
|
353
|
+
<a href="#">Something else here</a>
|
|
354
|
+
</btn-dropdown>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
<div>
|
|
358
|
+
<btn-dropdown label="4xl" size="btn-group-4xl" variant="btn-secondary">
|
|
359
|
+
<a href="#">Action</a>
|
|
360
|
+
<a href="#">Another Action</a>
|
|
361
|
+
<a href="#">Something else here</a>
|
|
362
|
+
</btn-dropdown>
|
|
363
|
+
</div>
|
|
364
|
+
|
|
365
|
+
<div>
|
|
366
|
+
<btn-dropdown label="5xl" size="btn-group-5xl" variant="btn-secondary">
|
|
367
|
+
<a href="#">Action</a>
|
|
368
|
+
<a href="#">Another Action</a>
|
|
369
|
+
<a href="#">Something else here</a>
|
|
370
|
+
</btn-dropdown>
|
|
371
|
+
</div>
|
|
372
|
+
|
|
373
|
+
<div>
|
|
374
|
+
<btn-dropdown label="btn-group-4" size="btn-group-4" variant="btn-secondary">
|
|
375
|
+
<a href="#">Action</a>
|
|
376
|
+
<a href="#">Another Action</a>
|
|
377
|
+
<a href="#">Something else here</a>
|
|
378
|
+
</btn-dropdown>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<div>
|
|
382
|
+
<btn-dropdown label="btn-group-[21px]" size="btn-group-[21px]" variant="btn-secondary">
|
|
383
|
+
<a href="#">Action</a>
|
|
384
|
+
<a href="#">Another Action</a>
|
|
385
|
+
<a href="#">Something else here</a>
|
|
386
|
+
</btn-dropdown>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<h2 class="text-2xl mt-6 mb-3">Split Button Sizes</h2>
|
|
391
|
+
|
|
392
|
+
<div class="flex gap-2">
|
|
393
|
+
<div>
|
|
394
|
+
<btn-dropdown label="xs" size="btn-group-xs" variant="btn-secondary" split>
|
|
395
|
+
<a href="#">Action</a>
|
|
396
|
+
<a href="#">Another Action</a>
|
|
397
|
+
<a href="#">Something else here</a>
|
|
398
|
+
</btn-dropdown>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<div>
|
|
402
|
+
<btn-dropdown label="sm" size="btn-group-sm" variant="btn-secondary" split>
|
|
403
|
+
<a href="#">Action</a>
|
|
404
|
+
<a href="#">Another Action</a>
|
|
405
|
+
<a href="#">Something else here</a>
|
|
406
|
+
</btn-dropdown>
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<div>
|
|
410
|
+
<btn-dropdown label="md" size="btn-group-md" variant="btn-secondary" split>
|
|
411
|
+
<a href="#">Action</a>
|
|
412
|
+
<a href="#">Another Action</a>
|
|
413
|
+
<a href="#">Something else here</a>
|
|
414
|
+
</btn-dropdown>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
<div>
|
|
418
|
+
<btn-dropdown label="lg" size="btn-group-lg" variant="btn-secondary" split>
|
|
419
|
+
<a href="#">Action</a>
|
|
420
|
+
<a href="#">Another Action</a>
|
|
421
|
+
<a href="#">Something else here</a>
|
|
422
|
+
</btn-dropdown>
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<div>
|
|
426
|
+
<btn-dropdown label="xl" size="btn-group-xl" variant="btn-secondary" split>
|
|
427
|
+
<a href="#">Action</a>
|
|
428
|
+
<a href="#">Another Action</a>
|
|
429
|
+
<a href="#">Something else here</a>
|
|
430
|
+
</btn-dropdown>
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
<div>
|
|
434
|
+
<btn-dropdown label="2xl" size="btn-group-2xl" variant="btn-secondary" split>
|
|
435
|
+
<a href="#">Action</a>
|
|
436
|
+
<a href="#">Another Action</a>
|
|
437
|
+
<a href="#">Something else here</a>
|
|
438
|
+
</btn-dropdown>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<div>
|
|
442
|
+
<btn-dropdown label="3xl" size="btn-group-3xl" variant="btn-secondary" split>
|
|
443
|
+
<a href="#">Action</a>
|
|
444
|
+
<a href="#">Another Action</a>
|
|
445
|
+
<a href="#">Something else here</a>
|
|
446
|
+
</btn-dropdown>
|
|
447
|
+
</div>
|
|
448
|
+
|
|
449
|
+
<div>
|
|
450
|
+
<btn-dropdown label="4xl" size="btn-group-4xl" variant="btn-secondary" split>
|
|
451
|
+
<a href="#">Action</a>
|
|
452
|
+
<a href="#">Another Action</a>
|
|
453
|
+
<a href="#">Something else here</a>
|
|
454
|
+
</btn-dropdown>
|
|
455
|
+
</div>
|
|
456
|
+
|
|
457
|
+
<div>
|
|
458
|
+
<btn-dropdown label="5xl" size="btn-group-5xl" variant="btn-secondary" split>
|
|
459
|
+
<a href="#">Action</a>
|
|
460
|
+
<a href="#">Another Action</a>
|
|
461
|
+
<a href="#">Something else here</a>
|
|
462
|
+
</btn-dropdown>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<div>
|
|
466
|
+
<btn-dropdown label="btn-4" size="btn-group-4" variant="btn-secondary" split>
|
|
467
|
+
<a href="#">Action</a>
|
|
468
|
+
<a href="#">Another Action</a>
|
|
469
|
+
<a href="#">Something else here</a>
|
|
470
|
+
</btn-dropdown>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
<div>
|
|
474
|
+
<btn-dropdown label="btn-[27px]" size="btn-group-[21px]" variant="btn-secondary" split>
|
|
475
|
+
<a href="#">Action</a>
|
|
476
|
+
<a href="#">Another Action</a>
|
|
477
|
+
<a href="#">Something else here</a>
|
|
478
|
+
</btn-dropdown>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
482
|
+
<h2 class="text-2xl mb-3 mt-6">Menu Alignment</h2>
|
|
483
|
+
|
|
484
|
+
<div class="flex gap-2">
|
|
485
|
+
<btn-dropdown align="start" label="Align Left" variant="btn-secondary">
|
|
486
|
+
<a href="#">Action</a>
|
|
487
|
+
<a href="#">Another Action</a>
|
|
488
|
+
<a href="#">Something else here</a>
|
|
489
|
+
</btn-dropdown>
|
|
490
|
+
|
|
491
|
+
<btn-dropdown align="start" label="Align Left (Split)" variant="btn-secondary" split>
|
|
492
|
+
<a href="#">Action</a>
|
|
493
|
+
<a href="#">Another Action</a>
|
|
494
|
+
<a href="#">Something else here</a>
|
|
495
|
+
</btn-dropdown>
|
|
496
|
+
|
|
497
|
+
<btn-dropdown align="end" label="Align Right" variant="btn-secondary">
|
|
498
|
+
<a href="#">Action</a>
|
|
499
|
+
<a href="#">Another Action</a>
|
|
500
|
+
<a href="#">Something else here</a>
|
|
501
|
+
</btn-dropdown>
|
|
502
|
+
|
|
503
|
+
<btn-dropdown align="end" label="Align Right (Split)" 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
|
+
|
|
510
|
+
<h2 class="text-2xl mb-3 mt-6">Dropup Variation</h2>
|
|
511
|
+
|
|
512
|
+
<div class="flex gap-2">
|
|
513
|
+
<btn-dropdown label="Dropup" variant="btn-secondary" dropup>
|
|
514
|
+
<a href="#">Action</a>
|
|
515
|
+
<a href="#">Another Action</a>
|
|
516
|
+
<a href="#">Something else here</a>
|
|
517
|
+
</btn-dropdown>
|
|
518
|
+
|
|
519
|
+
<btn-dropdown label="Dropup (Split)" variant="btn-secondary" dropup split>
|
|
520
|
+
<a href="#">Action</a>
|
|
521
|
+
<a href="#">Another Action</a>
|
|
522
|
+
<a href="#">Something else here</a>
|
|
523
|
+
</btn-dropdown>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
<h2 class="text-2xl mb-3 mt-6">Dropright Variation</h2>
|
|
527
|
+
|
|
528
|
+
<div class="flex gap-2">
|
|
529
|
+
<btn-dropdown label="Dropright" variant="btn-secondary" dropright>
|
|
530
|
+
<a href="#">Action</a>
|
|
531
|
+
<a href="#">Another Action</a>
|
|
532
|
+
<a href="#">Something else here</a>
|
|
533
|
+
</btn-dropdown>
|
|
534
|
+
|
|
535
|
+
<btn-dropdown label="Dropright (Split)" variant="btn-secondary" dropright split>
|
|
536
|
+
<a href="#">Action</a>
|
|
537
|
+
<a href="#">Another Action</a>
|
|
538
|
+
<a href="#">Something else here</a>
|
|
539
|
+
</btn-dropdown>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<h2 class="text-2xl mb-3 mt-6">Dropleft Variation</h2>
|
|
543
|
+
|
|
544
|
+
<div class="flex gap-2">
|
|
545
|
+
<btn-dropdown label="Dropleft" variant="btn-secondary" dropleft>
|
|
546
|
+
<a href="#">Action</a>
|
|
547
|
+
<a href="#">Another Action</a>
|
|
548
|
+
<a href="#">Something else here</a>
|
|
549
|
+
</btn-dropdown>
|
|
550
|
+
|
|
551
|
+
<btn-dropdown label="Dropleft (Split)" variant="btn-secondary" dropleft split>
|
|
552
|
+
<a href="#">Action</a>
|
|
553
|
+
<a href="#">Another Action</a>
|
|
554
|
+
<a href="#">Something else here</a>
|
|
555
|
+
</btn-dropdown>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
|
|
559
|
+
<script type="module">
|
|
560
|
+
import './demo.css';
|
|
561
|
+
import { createApp } from 'vue/dist/vue.esm-bundler';
|
|
562
|
+
import { BtnDropdown } from './index.ts';
|
|
563
|
+
|
|
564
|
+
const vue = createApp({
|
|
565
|
+
components: {
|
|
566
|
+
BtnDropdown
|
|
567
|
+
},
|
|
568
|
+
methods: {
|
|
569
|
+
onClickItem(e) {
|
|
570
|
+
console.log('clicked', e);
|
|
571
|
+
|
|
572
|
+
e.preventDefault();
|
|
573
|
+
},
|
|
574
|
+
onClick() {
|
|
575
|
+
console.log('action button clicked!');
|
|
576
|
+
},
|
|
577
|
+
onToggle() {
|
|
578
|
+
console.log('toggled');
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
})
|
|
582
|
+
.mount('#app');
|
|
583
|
+
</script>
|
|
584
|
+
</body>
|
|
585
|
+
</html>
|