arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 10:50:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ButtonGroup): new component (#88)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-05-07 11:19:25 +02:00
committed by GitHub
parent 2c5d7ccf70
commit 43066fd9ea
12 changed files with 317 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
playground/app.vue
View File

@@ -16,6 +16,7 @@ const components = [
'badge',
'breadcrumb',
'button',
'button-group',
'card',
'checkbox',
'chip',

57
playground/pages/button-group.vue Normal file
View File

@@ -0,0 +1,57 @@
<script setup lang="ts">
import theme from '#build/ui/button'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 -ml-[70px]">
<UButtonGroup>
<UButton> Click me! </UButton>
</UButtonGroup>
<UButtonGroup>
<UInput />
</UButtonGroup>
<UButtonGroup>
<UButton> Click me! </UButton>
<UButton color="white">
Click me!
</UButton>
<UButton> Click me! </UButton>
</UButtonGroup>
<UButtonGroup orientation="vertical">
<UButton color="white">
Click me!
</UButton>
<UInput />
</UButtonGroup>
<UButtonGroup>
<UButton color="white">
Click me!
</UButton>
<UInput />
</UButtonGroup>
<UButtonGroup>
<UInput />
<UButton color="white">
Click me!
</UButton>
</UButtonGroup>
</div>
<div class="flex gap-4 items-center justify-center">
<UButtonGroup v-for="size in sizes" :key="size" :size="(size as any)">
<UInput />
<UButton color="white">
Click me!
</UButton>
</UButtonGroup>
</div>
</div>
</template>