Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

CheckListPicker 列表选择器 ​

CheckList 组件的弹出层式。

提示

antd-mobile本身并没有提供这个组件，该组件是CheckList和createPopup结合，实际需要开发业务组件的Picker时也可以通过createPopup快速完成一个封装。

多选 ​

tsx
import { CheckListPicker, FormButtonGroup, FormItem, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const SchemaField = createSchemaField({ components: { FormItem, CheckListPicker } })
const schema = {
  type: 'object',
  properties: {
    fruit: {
      'type': 'array',
      'title': '水果',
      'required': true,
      'enum': [{ label: '苹果', value: 'apple' }, { label: '梨', value: 'pear' }, { label: '香蕉', value: 'banana' }],
      'x-decorator': 'FormItem',
      'x-component': 'CheckListPicker',
      'x-component-props': {
        placeholder: '请选择水果',
        multiple: true,
      },
    },
  },
}

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

export default function BasicDemo() {
  const form = useMemo(() => createForm({ initialValues: { fruit: ['apple', 'pear'] } }), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

自定义标签展示 ​

默认使用 Space 组件分隔展示已选项，不包裹 Tag。需要标签效果时，可通过 displayRender 自定义展示，编辑态与预览态均生效。搭配 FormItem 的 wrapperWrap: true 和 Space 的 wrap 可让标签换行。

tsx
import type { ICheckListPickerProps } from '@silver-formily/antd-mobile'
import { CheckListPicker, FormButtonGroup, FormItem, Reset, Space, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { Tag } from 'antd-mobile'
import { useMemo } from 'react'

const SchemaField = createSchemaField({ components: { FormItem, CheckListPicker } })
const displayRender: ICheckListPickerProps['displayRender'] = (value, props) => (
  <Space wrap size={4}>
    {value.map((item) => {
      const option = props.options?.find(option => (typeof option === 'object' ? option.value : option) === item)
      const label = typeof option === 'object' ? option.label : option ?? item
      return <Tag key={`${typeof item}:${item}`} style={{ fontSize: 'inherit' }}>{label}</Tag>
    })}
  </Space>
)

const schema = {
  type: 'object',
  properties: {
    fruit: {
      'type': 'array',
      'title': '水果',
      'required': true,
      'enum': [{ label: '苹果', value: 'apple' }, { label: '梨', value: 'pear' }, { label: '香蕉', value: 'banana' }],
      'x-decorator': 'FormItem',
      'x-decorator-props': { wrapperWrap: true },
      'x-component': 'CheckListPicker',
      'x-component-props': {
        placeholder: '请选择水果',
        multiple: true,
        displayRender,
      },
    },
  },
}

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

export default function DisplayDemo() {
  const form = useMemo(() => createForm({ initialValues: { fruit: ['apple', 'pear'] } }), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

单选 ​

tsx
import { CheckListPicker, FormButtonGroup, FormItem, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const SchemaField = createSchemaField({ components: { FormItem, CheckListPicker } })
const schema = {
  type: 'object',
  properties: {
    fruit: {
      'type': 'array',
      'title': '水果',
      'required': true,
      'enum': [{ label: '苹果', value: 'apple' }, { label: '梨', value: 'pear' }, { label: '香蕉', value: 'banana' }],
      'x-decorator': 'FormItem',
      'x-component': 'CheckListPicker',
      'x-component-props': {
        placeholder: '请选择水果',
      },
    },
  },
}

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

export default function BasicDemo() {
  const form = useMemo(() => createForm({ initialValues: { fruit: ['apple'] } }), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

超长滚动列表 ​

下面提供 100 个选项，分别演示单选与多选。多选通过 FormItem 的 wrapperWrap: true 展示已选文本换行。选项区域最大高度为 60vh，超出后在弹层内独立滚动；多选时顶部取消、确认按钮保持可见。滚动至末尾选择选项后，可以通过提交查看结果，或重置清空选择。

tsx
import { CheckListPicker, FormButtonGroup, FormItem, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

const SchemaField = createSchemaField({ components: { FormItem, CheckListPicker } })
const options = Array.from({ length: 100 }, (_, index) => ({
  label: `选项 ${index + 1}`,
  value: index + 1,
}))
const schema = {
  type: 'object',
  properties: {
    single: {
      'type': 'array',
      'title': '长列表单选',
      'enum': options,
      'x-decorator': 'FormItem',
      'x-component': 'CheckListPicker',
      'x-component-props': { placeholder: '请选择一个选项' },
    },
    multiple: {
      'type': 'array',
      'title': '长列表多选',
      'x-decorator-props': { wrapperWrap: true },
      'enum': options,
      'x-decorator': 'FormItem',
      'x-component': 'CheckListPicker',
      'x-component-props': { multiple: true, placeholder: '请选择多个选项' },
    },
  },
}

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

export default function LongListDemo() {
  const form = useMemo(() => createForm(), [])
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

属性说明
multiple是否多选，默认 false
placeholder空值占位，默认“请选择”
confirmText / cancelText多选按钮文字，默认“确定” / “取消”
onConfirm(value) => void，写回后通知
onCancel取消按钮或遮罩关闭时通知
onClose确认、取消或主动关闭时通知
popupPropscreatePopup 的 PopupOptions，如 bodyStyle、afterShow、afterClose、safeArea
displayRender(value, props) => ReactNode，自定义编辑态与预览态展示
aria-label / aria-labelledby触发按钮无障碍名称，默认采用字段字符串标题

同时支持 CheckList 的 mode、activeIcon、extra。不支持 defaultValue、children 或外部控制弹层可见性。

底层选项接口参考 antd-mobile CheckList 文档。