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

feat(RadioGroup): new component (#41)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-04-02 11:35:16 +02:00
committed by GitHub
parent 80a3a0c28f
commit e29b514f8d
11 changed files with 932 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
playground/pages/form.vue
View File

@@ -116,6 +116,7 @@ function onSubmit (event: FormSubmitEvent<User>) {
<div class="flex gap-4">
<FormNestedExample />
<FormNestedListExample />
<FormElementsExample />
</div>
</div>
</template>

60
playground/pages/radio-group.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import theme from '#build/ui/checkbox'
const sizes = Object.keys(theme.variants.size)
const literalOptions = [
'Option 1',
'Option 2',
'Option 3'
]
const options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
const optionsWithDescription = [
{ value: '1', label: 'Option 1', description: 'Description 1' },
{ value: '2', label: 'Option 2', description: 'Description 2' },
{ value: '3', label: 'Option 3', description: 'Description 3' }
]
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-142px]">
<URadioGroup :options="options" default-value="1" />
<URadioGroup :options="literalOptions" />
<URadioGroup :options="options" label="Disabled" disabled />
<URadioGroup :options="options" color="red" default-value="1" />
<URadioGroup :options="options" orientation="horizontal" />
</div>
<div class="flex items-center gap-4">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
</div>
<div class="flex items-center gap-4 ml-[75px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
</div>
<div class="flex gap-4 ml-[-142px]">
<URadioGroup :options="options" legend="Legend" />
<URadioGroup :options="options" legend="Legend" required />
<URadioGroup :options="options">
<template #legend>
<span class="italic font-bold">
With slots
</span>
</template>
<template #label="{ option }">
<span class="italic">
{{ option.label }}
</span>
</template>
</URadioGroup>
</div>
</div>
</template>