Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Selector ​

Selector 是对 antd-mobile 选择组的 Formily 适配，支持单选和多选，字段值始终是选项值组成的数组。

单选与选项禁用 ​

tsx
import { FormButtonGroup, FormItem, Selector, 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]}
        component={[Selector, { columns: 3 }]}
        dataSource={[{ label: '标准', value: 'standard' }, { label: '高级', value: 'premium' }, { label: '旗舰', value: 'ultimate', disabled: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

多选与描述 ​

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

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

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]}
        component={[Selector, { multiple: true, columns: 2, options: [{ label: '配送', value: 'delivery', description: '送货上门' }, { label: '安装', value: 'installation', description: '预约安装' }] }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

禁用、只读与阅读态 ​

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

const form = createForm({ initialValues: { frozen: ['standard'], preview: ['premium'] } })

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

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="frozen"
        title="禁用"
        decorator={[FormItem]}
        component={[Selector]}
        disabled
        dataSource={[{ label: '标准', value: 'standard' }, { label: '高级', value: 'premium' }, { label: '旗舰', value: 'ultimate', disabled: true }]}
      />
      <Field
        name="preview"
        title="阅读态"
        decorator={[FormItem]}
        component={[Selector]}
        readPretty
        dataSource={[{ label: '标准', value: 'standard' }, { label: '高级', value: 'premium' }, { label: '旗舰', value: 'ultimate', disabled: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

阅读态根据标准 label、value 字段查找标签；需要阅读态展示时应使用这两个字段。

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