sun-parakeet

 v0.0.12

Checkbox 复选框

间距调整请参考 Space

示例

基础用法

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

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

<script lang="ts">
  let form = $state({
    fruits: [],
  })
</script>

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

表单+垂直布局+复选框组+全选与半选

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

Checkbox

属性

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

事件

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

CheckboxGroup

属性

属性 说明 类型 默认值
value 选中的选项 Array $bindable([])
selectAll 全选按钮。提供 string 类型可自定义文本 boolean | string false
disabled 整组失效 boolean false
block 是否渲染为块级元素 boolean false
direction 排列方向 'horizontal' | 'vertical' 'horizontal'
wrap 是否自动换行。仅在 'horizontal' 时有效 boolean false

事件

事件 说明 类型
onChange 变更事件 (value: Array ) => void

后退

前进

CalendarPicker 日历选择器

CheckList 可勾选列表