ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update radio group component

This commit is contained in:
Ramon Wenger 2022-12-22 11:08:04 +01:00
parent 65a2180822
commit 28a193e22a
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/ui/ItRadioGroup.vue
View File

@ -1,28 +1,22 @@
<template> <template>
<RadioGroup <RadioGroup
:model-value="modelValue" :model-value="modelValue"
class="border p-12"
@update:modelValue="$emit('update:modelValue', $event)" @update:modelValue="$emit('update:modelValue', $event)"
class="mt-2 flex flex-row justify-between"
> >
<RadioGroupLabel class="flex-1">{{ label }}</RadioGroupLabel> <RadioGroupLabel class="text-5xl mb-12 leading-normal font-bold block">{{
<div class="flex flex-1 justify-items-center space-x-4"> label
}}</RadioGroupLabel>
<div class="flex justify-between align-items-center justify-items-center space-x-6">
<RadioGroupOption <RadioGroupOption
as="template"
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
v-slot="{ checked, active }" as="template"
class="flex-1" class="flex-1"
:value="item.value" :value="item.value"
> >
<div <div
class="" class="py-10 text-xl flex-1 text-center mr-6 last:mr-0 cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
:class="[
checked
? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700'
: 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
active ? 'ring ring-offset-2 ring-indigo-500' : '',
'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase',
]"
> >
<RadioGroupLabel as="span"> <RadioGroupLabel as="span">
{{ item.name }} {{ item.name }}