Radio 单选框

用于在多个选项中进行单选的单选框组件

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1">
        单选框
      </SkRadio>
    </SkRadioGroup>
  </div>
</template>

用法 (Radio)

Value 标识值

Prop	类型	默认值	描述
`value`	`string`	-	设置单选框标识，作为是否选中识别的值

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('option1')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1">
        九华山
      </SkRadio>
      <SkRadio value="option2">
        梵净山
      </SkRadio>
      <SkRadio value="option3">
        三清山
      </SkRadio>
    </SkRadioGroup>
  </div>
</template>

Label 标签

Prop	类型	默认值	描述
`label`	`string`	-	设置单选框标签文本

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('option1')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1" label="峨眉山" />
      <SkRadio value="option2" label="武当山" />
      <SkRadio value="option3" label="老君山" />
    </SkRadioGroup>
  </div>
</template>

Color 颜色

Prop	类型	默认值	描述
`color`	`{Color}`	`brand`	设置单选框的颜色主题

Color	描述
`brand`	品牌态颜色
`success`	成功态颜色
`warning`	警告态颜色
`danger`	危险态颜色
`neutral`	中性态颜色

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="brand" label="品牌单选框" color="brand" />
      <SkRadio value="success" label="成功单选框" color="success" />
      <SkRadio value="warning" label="警告单选框" color="warning" />
      <SkRadio value="danger" label="危险单选框" color="danger" />
      <SkRadio value="neutral" label="中性单选框" color="neutral" />
    </SkRadioGroup>
  </div>
</template>

Size 尺寸

Prop	类型	默认值	描述
`size`	`{Size}`	`medium`	设置单选框的尺寸大小

Size	描述
`small`	小型
`medium`	中型
`large`	大型

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('small')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio label="小型单项框" value="small" size="small" />
      <SkRadio label="中型单项框" value="medium" size="medium" />
      <SkRadio label="大型单项框" value="large" size="large" />
    </SkRadioGroup>
  </div>
</template>

Disabled 禁用

Prop	类型	默认值	描述
`disabled`	`boolean`	`false`	设置单选框是否为禁用状态

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('option2')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1" label="禁用未选" disabled />
      <SkRadio value="option2" label="禁用选中" disabled />
    </SkRadioGroup>
  </div>
</template>

用法 (RadioGroup)

Controlled 选中值

Prop	类型	默认值	描述
`v-model`	`string`	-	单选框组的选中值 (双向绑定)

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('option')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1" label="九寨沟" />
      <SkRadio value="option2" label="喀纳斯" />
    </SkRadioGroup>
  </div>
</template>

Color 整组颜色

Prop	类型	默认值	描述
`color`	继承 Radio Color	`brand`	设置整个复选框组的颜色主题，会被 Radio 的 color 继承/覆盖

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected" color="warning">
      <SkRadio value="option1" label="北岳恒山" />
      <SkRadio value="option2" label="西岳华山" />
      <SkRadio value="option3" label="中岳嵩山" />
      <SkRadio value="option4" label="东岳泰山" color="danger" />
      <SkRadio value="option5" label="南岳衡山" />
    </SkRadioGroup>
  </div>
</template>

Size 整组尺寸

Prop	类型	默认值	描述
`size`	继承 Radio Size	`medium`	设置整个单选框组的尺寸，会被 Radio 的 size 继承/覆盖

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected">
      <SkRadio value="option1" label="黄山" size="large" />
      <SkRadio value="option2" label="庐山" />
      <SkRadio value="option3" label="雁荡山" />
    </SkRadioGroup>
  </div>
</template>

Disabled 整组禁用

Prop	类型	默认值	描述
`disabled`	`boolean`	`false`	设置是否禁用整个单选框组

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('option1')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected" disabled>
      <SkRadio value="option1" label="黄山" />
      <SkRadio value="option2" label="庐山" />
      <SkRadio value="option3" label="雁荡山" />
    </SkRadioGroup>
  </div>
</template>

Direction 排列方向

Prop	类型	默认值	描述
`direction`	`{Direction}`	`vertical`	设置单选框的排列方向

Direction	描述
`vertical`	垂直
`horizontal`	水平

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div class="p-4">
    <SkRadioGroup v-model="selected" direction="horizontal">
      <SkRadio value="option1" label="黄山" />
      <SkRadio value="option2" label="庐山" />
      <SkRadio value="option3" label="雁荡山" />
    </SkRadioGroup>
  </div>
</template>

接口 (Radio)

Props

属性名	类型	默认值	描述
`value`	`string`	-	详见 Value 标识值
`label`	`string`	-	详见 Label 标签
`color`	`{Color}`	`'brand'`	详见 Color 颜色
`size`	`{Size}`	`'medium'`	详见 Size 尺寸
`disabled`	`boolean`	`false`	详见 Disabled 禁用
`clax`	`WIP`	-	用于拓展当前基础样式

Emits

事件名	参数	描述
`click`	`(event: any)`	当单选框被点击时触发

Slots

插槽名	属性	描述
`default`	-	单选框的标签内容

接口 (RadioGroup)

Props

属性名	类型	默认值	描述
`v-model`	`string`	-	详见 Controlled 选中值
`color`	`{Color}`	`'brand'`	详见 Color 整组颜色，会被 Radio 组件继承或覆盖
`size`	`{Size}`	`'medium'`	详见 Size 整组尺寸，会被 Radio 组件继承或覆盖
`disabled`	`boolean`	`false`	详见 Disabled 整组禁用，会被 Radio 组件继承或覆盖
`direction`	`{Direction}`	`'vertical'`	详见 Direction 排列方向
`clax`	`WIP`	-	用于拓展当前基础样式

Emits

事件名	参数	描述
`change`	`(value: string)`	当单选框组的选中值被改变时触发

Slots

插槽名	属性	描述
`default`	-	单选框列表

交互

正在完善中，敬请期待！😊