Radio

<script setup lang="ts">
    import { Radio } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Radio aria-label="单选示例" name="demo-radio">Radio</Radio>
</template>

<script setup lang="ts">
    import { Radio } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Radio aria-label="单选示例" name="demo-radio-extra">
        Semi Design
        <template #extra>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统</template>
    </Radio>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Radio } from '@fibrous/semi-ui-vue';

    const disabled = ref(true);
</script>

<template>
    <div>
        <Radio aria-label="单选示例" :defaultChecked="false" :disabled="disabled" name="demo-radio-disabled"> Disabled </Radio>
        <br />
        <Radio aria-label="单选示例" defaultChecked :disabled="disabled" name="demo-radio-defaultChecked-disabled"> Disabled </Radio>
        <div :style="{ marginTop: '20px' }">
            <Button type="primary" @click="disabled = !disabled">Toggle disabled</Button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Radio, type RadioChangeEvent } from '@fibrous/semi-ui-vue';

    const checked = ref(true);
    const onChange = (e: RadioChangeEvent) => console.log('radio checked', e.target.checked);
</script>

<template>
    <Radio v-model="checked" aria-label="单选示例" mode="advanced" name="demo-radio-advanced" @change="onChange"> 允许取消选择 </Radio>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Radio, RadioGroup, type RadioChangeEvent, type RadioValue } from '@fibrous/semi-ui-vue';

    const value = ref<RadioValue | undefined>(1);
    const onChange = (e: RadioChangeEvent) => console.log('radio checked', e.target.value);
</script>

<template>
    <RadioGroup v-model="value" aria-label="单选组合示例" name="demo-radio-group" @change="onChange">
        <Radio :value="1">A</Radio>
        <Radio :value="2">B</Radio>
        <Radio :value="3">C</Radio>
        <Radio :value="4">D</Radio>
    </RadioGroup>
</template>

<script setup lang="ts">
    import { Radio, RadioGroup } from '@fibrous/semi-ui-vue';
</script>

<template>
    <RadioGroup aria-label="单选组合示例" direction="vertical" name="demo-radio-group-vertical">
        <Radio :value="1">A</Radio>
        <Radio :value="2">B</Radio>
        <Radio :value="3">C</Radio>
        <Radio :value="4">D</Radio>
    </RadioGroup>
</template>

<script setup lang="ts">
    import { Radio, RadioGroup, Space } from '@fibrous/semi-ui-vue';

    const sizes = ['small', 'middle', 'large'] as const;
</script>

<template>
    <Space align="start" spacing="loose" vertical>
        <RadioGroup v-for="size in sizes" :key="size" aria-label="单选组合示例" :buttonSize="size" :defaultValue="1" :name="`demo-radio-${size}`" type="button">
            <Radio :value="1">即时推送</Radio>
            <Radio :value="2">定时推送</Radio>
            <Radio :value="3">动态推送</Radio>
        </RadioGroup>
    </Space>
</template>

<script setup lang="ts">
    import { Radio, RadioGroup } from '@fibrous/semi-ui-vue';

    const extra = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: 1, disabled: true },
        { value: 2, disabled: false },
        { value: 3, disabled: false },
    ];
</script>

<template>
    <RadioGroup aria-label="单选组合示例" :defaultValue="2" direction="vertical" name="demo-radio-group-card" type="card">
        <Radio v-for="item in items" :key="item.value" :disabled="item.disabled" :style="{ width: '280px' }" :value="item.value">
            单选框标题
            <template #extra>{{ extra }}</template>
        </Radio>
    </RadioGroup>
</template>

<script setup lang="ts">
    import { Radio, RadioGroup } from '@fibrous/semi-ui-vue';

    const extra = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: 1, disabled: true },
        { value: 2, disabled: false },
        { value: 3, disabled: false },
    ];
</script>

<template>
    <RadioGroup aria-label="单选组合示例" :defaultValue="2" direction="vertical" name="demo-radio-group-pureCard" type="pureCard">
        <Radio v-for="item in items" :key="item.value" :disabled="item.disabled" :style="{ width: '280px' }" :value="item.value">
            单选框标题
            <template #extra>{{ extra }}</template>
        </Radio>
    </RadioGroup>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { RadioGroup, Space, type RadioChangeEvent, type RadioValue } from '@fibrous/semi-ui-vue';

    const value1 = ref<RadioValue | undefined>('Guest');
    const value2 = ref<RadioValue | undefined>('Developer');
    const value3 = ref<RadioValue | undefined>('Maintainer');
    const plainOptions = ['Guest', 'Developer', 'Maintainer'];
    const options = [
        { label: 'Guest', value: 'Guest', extra: 'Semi Design', style: { width: '120px' } },
        { label: 'Developer', value: 'Developer', extra: 'Semi Design', style: { width: '120px' } },
        { label: 'Maintainer', value: 'Maintainer', extra: 'Semi Design', style: { width: '120px' } },
    ];
    const optionsWithDisabled = [
        { label: 'Guest', value: 'Guest' },
        { label: 'Developer', value: 'Developer' },
        { label: 'Maintainer', value: 'Maintainer', disabled: true },
    ];

    const log = (name: string, e: RadioChangeEvent) => console.log(`${name} checked`, e.target.value);
</script>

<template>
    <Space align="start" spacing="loose" vertical>
        <RadioGroup v-model="value1" aria-label="单选组合示例" name="demo-radio-group-1" :options="plainOptions" @change="log('radio1', $event)" />
        <RadioGroup v-model="value2" aria-label="单选组合示例" name="demo-radio-group-2" :options="optionsWithDisabled" @change="log('radio2', $event)" />
        <RadioGroup v-model="value3" aria-label="单选组合示例" name="demo-radio-group-3" :options="options" @change="log('radio3', $event)" />
    </Space>
</template>