Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Segmented ​

字段值为字符串或数字。通过字段 dataSource 配置选项；支持原始值和带 label、value 的对象。只读映射为禁用交互，阅读态显示所选标签。

基础使用 ​

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

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

export default function SegmentedBasic() {
  const [form] = useState(() => createForm({ initialValues: { period: '周' } }))
  return (
    <FormProvider form={form}>
      <Field
        name="period"
        title="统计周期"
        decorator={[FormItem]}
        component={[Segmented, { options: ['日', '周', '月'] }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

数据源与禁用选项 ​

使用字段 dataSource 配置数字值及标签，“企业”选项不可选择。

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

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

export default function SegmentedAppearance() {
  const [form] = useState(() => createForm({ initialValues: { level: 2 } }))
  return (
    <FormProvider form={form}>
      <Field
        name="level"
        title="服务等级"
        dataSource={[{ label: '基础', value: 1 }, { label: '专业', value: 2 }, { label: '企业', value: 3, disabled: true }]}
        decorator={[FormItem]}
        component={[Segmented, { block: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

字段状态 ​

对比 disabled、readOnly 和 readPretty 状态。

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

export default function SegmentedStatus() {
  const [form] = useState(() => createForm({ initialValues: { disabled: '周', readOnly: '周', readPretty: '周' } }))
  return (
    <FormProvider form={form}>
      <Field name="disabled" title="禁用" disabled decorator={[FormItem]} component={[Segmented, { options: ['日', '周', '月'] }]} />
      <Field name="readOnly" title="只读" readOnly decorator={[FormItem]} component={[Segmented, { options: ['日', '周', '月'] }]} />
      <Field name="readPretty" title="阅读态" readPretty decorator={[FormItem]} component={[Segmented, { options: ['日', '周', '月'] }]} />
    </FormProvider>
  )
}

API ​

公开属性类型为 ISegmentedProps。支持 Formily 字段的 disabled、readOnly 和 readPretty 状态。

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