sun-parakeet

 v0.0.12

Radio 单选框

示例

基础用法

<Radio />
<Radio>有描述的单选框</Radio>
<Radio checked>默认选中</Radio>
<Radio disabled>禁用</Radio>
<Radio checked disabled>选中</Radio>
<Radio icon="sun">自定义图标</Radio>

表单+水平布局+单选框组

<script lang="ts">
  let form = $state<{ fruit?: string }>({
    fruit: 'apple',
  })
</script>

<Form header="表单+水平布局+单选框组" bind:data={form} layout="horizontal">
  <FormItem label="喜欢的水果" field="fruit" required>
    <RadioGroup bind:value={form.fruit}>
      <Radio value="apple">苹果</Radio>
      <Radio value="orange">橘子</Radio>
      <Radio value="banana">香蕉</Radio>
    </RadioGroup>
  </FormItem>
</Form>

表单+垂直布局+单选框组

<Form header="表单+垂直布局+单选框组" bind:data={form} layout="vertical">
  <FormItem label="喜欢的水果" field="fruit" required>
    <RadioGroup bind:value={form.fruit} direction="vertical" name="fruits">
      <Radio value="apple">苹果</Radio>
      <Radio value="orange">橘子</Radio>
      <Radio value="banana">香蕉</Radio>
    </RadioGroup>
  </FormItem>
</Form>

Radio

属性

属性 说明 类型 默认值
checked 是否已选中 boolean $bindable(false)
value 值。作为 RadioGroup 成员时必须提供 string | number | symbol undefined
icon 自定义图标 string | IconOption 组件默认图标
disabled 是否禁用 boolean false

事件

事件 说明 类型
onChange 选中状态变更事件 (checked: boolean) => void

RadioGroup

属性

属性 说明 类型 默认值
value 选中的选项 string | number | symbol $bindable()
name 自定义分组名称 string UUID
disabled 整组失效 boolean false
block 是否渲染为块级元素 boolean false
direction 排列方向 'horizontal' | 'vertical' 'horizontal'
wrap 是否自动换行。仅在 'horizontal' 时有效 boolean false

事件

事件 说明 类型
onChange 变更事件 (value: string | number | symbol ) => void

后退

前进

PickerView 选择器视图

Stepper 步进器