Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

CheckList ​

CheckList 是对 antd-mobile 可勾选列表的 Formily 适配，支持单选和多选，字段值始终为数组。

基础单选 ​

通过字段 dataSource 提供选项。默认单选，初始值使用数组；选项可单独设置 disabled。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({ initialValues: { delivery: ['express'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="delivery"
        title="配送方式"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList]}
        dataSource={[{ label: '快递配送', value: 'express' }, { label: '到店自提', value: 'pickup' }, { label: '当日送达', value: 'today', disabled: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

多选 ​

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({ initialValues: { services: ['安装', '回收'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="services"
        title="附加服务"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList, { multiple: true, options: ['安装', '回收', '延保'] }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

自定义选中图标 ​

通过 activeIcon 替换默认选中图标，未选中时不显示该图标。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { SmileOutline } from 'antd-mobile-icons'

const form = createForm({ initialValues: { delivery: ['express'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="delivery"
        title="配送方式"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList, { activeIcon: <SmileOutline /> }]}
        dataSource={[{ label: '快递配送', value: 'express' }, { label: '到店自提', value: 'pickup' }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

自定义列表右侧区域 ​

通过 extra 自定义右侧区域，回调接收当前项的选中状态 active。此示例分别使用实心和空心圆形图标展示选中与未选中状态；设置 extra 后不再使用 activeIcon。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'
import { CheckCircleFill, CheckCircleOutline } from 'antd-mobile-icons'

const form = createForm({ initialValues: { delivery: ['express'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="delivery"
        title="配送方式"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[
          CheckList,
          { extra: (active: boolean) => active ? <CheckCircleFill /> : <CheckCircleOutline /> },
        ]}
        dataSource={[{ label: '快递配送', value: 'express' }, { label: '到店自提', value: 'pickup' }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

整组只读 ​

通过字段 readOnly 设置整组只读，保留选中值，无法修改选择。Formily 阅读态保留列表外观，并以禁用状态展示。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({ initialValues: { services: ['安装'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="services"
        title="已选服务"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList, { multiple: true, options: ['安装', '回收', '延保'] }]}
        readOnly
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

禁用 ​

在字段 dataSource 的选项中设置 disabled 可禁用单项，其余选项仍可选择；在字段上设置 disabled 可禁用整个列表。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({ initialValues: { delivery: ['express'], services: ['安装'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="delivery"
        title="单项禁用"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList]}
        dataSource={[
          { label: '快递配送', value: 'express' },
          { label: '到店自提', value: 'pickup' },
          { label: '当日送达（暂不可用）', value: 'today', disabled: true },
        ]}
      />
      <Field
        name="services"
        title="整组禁用"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList, { multiple: true, options: ['安装', '回收', '延保'] }]}
        disabled
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

自定义列表项 ​

没有数据源时，可通过 CheckList.Item 自定义标题、描述等内容。存在非空数据源时优先渲染数据源选项。

tsx
import { CheckList, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({ initialValues: { plan: ['standard'] } })

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="plan"
        title="套餐"
        decorator={[FormItem, { layout: 'vertical' }]}
        component={[CheckList]}
      >
        <CheckList.Item value="standard" description="适合日常使用">标准套餐</CheckList.Item>
        <CheckList.Item value="premium" description="包含更多服务">高级套餐</CheckList.Item>
      </Field>
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

ICheckListOption 使用 label: ReactNode 作为列表项内容，value 支持字符串和数字，其余属性与原生 CheckList.Item 一致。基础值与对象选项可以混用，值需唯一，数字 0 与字符串 "0" 为不同选项。

CheckList.Item 直接使用原生列表项组件，ICheckListItemProps 对应其原生类型。

单选时再次点击已选项会取消选择。字段 dataSource 动态更新会同步刷新列表；没有数据源时显示 children。

其余配置参考 antd-mobile CheckList 官方文档。