Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Radio ​

Radio 是对 antd-mobile Radio 的 Formily 适配。单选场景应使用 Radio.Group。

基础使用 ​

通过字段的 dataSource 提供选项，支持初始值和表单提交。

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

const form = createForm({
  initialValues: {
    hobbies: 'eat',
  },
})

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

export default function RadioBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="hobbies"
        title="休闲活动"
        decorator={[FormItem]}
        component={[Radio.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

排列方向 ​

layout 控制排列方向，未设置时继承 FormLayout 的方向，默认纵向排列。

协议示例通过 allowClear: true 开启再次点击取消选中，取消后字段值为 null。默认不开启，多选项组同样支持此配置。

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

const form = createForm()

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

export default function RadioLayout() {
  return (
    <FormProvider form={form}>
      <Field
        name="city"
        title="所在城市"
        decorator={[FormItem]}
        component={[Radio.Group, {
          options: [
            { label: '杭州', value: 'hangzhou' },
            { label: '上海', value: 'shanghai' },
            { label: '北京', value: 'beijing' },
          ],
          layout: 'horizontal',
          layoutBlock: true,
        }]}
      />
      <Field
        name="hobbies"
        title="休闲活动"
        decorator={[FormItem]}
        component={[Radio.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <Field
        name="agree"
        title="协议"
        decorator={[FormItem]}
        component={[Radio.Group, { allowClear: true }]}
        dataSource={[
          { label: '已阅读并同意用户协议', value: 'yes' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

禁用状态 ​

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

const form = createForm({
  initialValues: {
    hobbies: 'eat',
  },
})

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

export default function RadioDisabled() {
  return (
    <FormProvider form={form}>
      <Field
        name="hobbies"
        title="部分禁用"
        decorator={[FormItem]}
        component={[Radio.Group]}
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep', disabled: true },
          { label: '打豆豆', value: 'play' },
        ]}
      />
      <Field
        name="frozen"
        title="整体禁用"
        decorator={[FormItem]}
        component={[Radio.Group]}
        disabled
        dataSource={[
          { label: '吃饭', value: 'eat' },
          { label: '睡觉', value: 'sleep' },
        ]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

Radio.Group ​

属性名类型描述默认值
allowClearboolean是否允许再次点击当前选项取消选中，取消后字段值为 nullfalse
layout'vertical' | 'horizontal'选项排列方向'vertical'
layoutBlockboolean选项容器是否占满整行false
childrenReactNode自定义选项，提供时优先于数据源渲染-

其余属性参考 antd-mobile Radio 官方文档。