aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2026-02-23 07:04:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

whole button is selectable for styledRadiogroup

Browse Source
This commit is contained in:
benalleng
2023-10-01 10:28:14 -04:00
committed by Paul Miller
parent cb4f78231a
commit 4bdfc40cad
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/layout/Radio.tsx
View File

@@ -60,36 +60,38 @@ export function StyledRadioGroup(props: {
}}
disabled={choice.disabled}
>
<div
class={"flex items-center gap-2 p-4"}
classList={{ "px-2 py-2": props.small }}
>
<div class={"flex items-center"}>
<RadioGroup.ItemInput />
<RadioGroup.ItemControl
class="flex aspect-square h-6 w-6 items-center justify-center rounded-full border"
classList={{
hidden: !props.vertical
}}
<RadioGroup.ItemLabel
class="w-full p-4"
classList={{ "px-2 py-2": props.small }}
>
<RadioGroup.ItemIndicator class="h-3 w-3 rounded-full bg-white" />
</RadioGroup.ItemControl>
<RadioGroup.ItemLabel>
<div class="block">
<div
class={"font-semibold"}
<div class="flex flex-row gap-2">
<RadioGroup.ItemControl
class="my-auto flex aspect-square h-6 w-6 items-center justify-center rounded-full border"
classList={{
"text-base": props.small,
"text-md": !props.small,
"text-sm": !props.vertical
hidden: !props.vertical
}}
>
{choice.label}
</div>
<Show when={!props.small}>
<div class="text-sm font-light">
{choice.caption}
<RadioGroup.ItemIndicator class="h-3 w-3 rounded-full bg-white" />
</RadioGroup.ItemControl>
<div class="flex flex-col">
<div
class={"font-semibold"}
classList={{
"text-base": props.small,
"text-md": !props.small,
"text-sm": !props.vertical
}}
>
{choice.label}
</div>
</Show>
<Show when={!props.small}>
<div class="text-sm font-light">
{choice.caption}
</div>
</Show>
</div>
</div>
</RadioGroup.ItemLabel>
</div>