sun-parakeet

 v0.0.12

CheckList 可勾选列表

示例

CheckListItem 单独使用

<List header="CheckListItem 单独使用">
  <CheckListItem>单独使用</CheckListItem>
  <CheckListItem checked>默认选中</CheckListItem>
  <CheckListItem checked icon="sun">自定义图标</CheckListItem>
  <CheckListItem disabled>禁用</CheckListItem>
  <CheckListItem checked disabled>禁用，已勾选</CheckListItem>
</List>

可勾选列表-单选

<CheckList bind:value={fruit} header="可勾选列表-单选">
  <CheckListItem value="apple">苹果</CheckListItem>
  <CheckListItem value="orange">橘子</CheckListItem>
  <CheckListItem value="banana">香蕉</CheckListItem>
</CheckList>

可勾选列表-多选

<CheckList bind:value={form.fruits} header="可勾选列表-多选" multiple selectAll>
  <CheckListItem value="apple">苹果</CheckListItem>
  <CheckListItem value="orange">橘子</CheckListItem>
  <CheckListItem value="banana">香蕉</CheckListItem>
</CheckList>

表单

<Form header="表单">
  <CheckListItem bind:checked={form.enabled}>单独使用</CheckListItem>
  <CheckList bind:value={form.fruits} header="表单-可勾选列表" multiple selectAll>
    <CheckListItem value="apple">苹果</CheckListItem>
    <CheckListItem value="orange">橘子</CheckListItem>
    <CheckListItem value="banana">香蕉</CheckListItem>
  </CheckList>
</Form>

CheckList

属性

属性 说明 类型 默认值
value 选中的选项 string | number | symbol |
Array		 $bindable([])
header 标题 string | Snippet undefined
multiple 是否允许多选 boolean false
selectAll 全选按钮。仅多选模式。提供 string 类型可自定义文本 boolean | string false
disabled 整组失效 boolean false

事件

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

CheckListItem

属性

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

事件

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

后退

前进

Checkbox 复选框

DatePicker 日期选择器