Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Stepper ​

主要用于数值输入的表单控件

基础使用 ​

通过字段初始值设置数量，使用 min 和 max 限制范围。

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

const form = createForm({ initialValues: { quantity: 2 } })

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

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="quantity"
        title="商品数量"
        decorator={[FormItem]}
        component={[Stepper, { min: 1, max: 10 }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

步长与精度 ​

step 控制每次增减的幅度，digits 控制小数位数。

formatter 和 parser 直接使用原生步进器的展示格式化与输入解析能力，格式化后的展示文本不会写入字段值。使用 stringMode 可以通过字符串保存高精度小数，避免浮点精度丢失。

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

const form = createForm({ initialValues: { weight: 1.5, price: 2.35, precise: '0.123456789012345678' } })

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

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="weight"
        title="重量"
        decorator={[FormItem]}
        component={[Stepper, { min: 0, step: 0.5, digits: 1 }]}
      />
      <Field
        name="price"
        title="价格"
        decorator={[FormItem]}
        component={[Stepper, {
          min: 0,
          step: 0.01,
          digits: 2,
          formatter: (value?: number) => `${value ?? 0} 元`,
          parser: (text: string) => Number(text.replace(' 元', '')),
        }]}
      />
      <Field
        name="precise"
        title="高精度小数"
        decorator={[FormItem]}
        component={[Stepper, { stringMode: true, step: '0.000000000000000001' }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

状态控制 ​

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

const form = createForm({ initialValues: { disabled: 2, inputOnly: 3, preview: 4 } })

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

export default function Demo() {
  return (
    <FormProvider form={form}>
      <Field
        name="disabled"
        title="禁用"
        decorator={[FormItem]}
        component={[Stepper]}
        disabled
      />
      <Field
        name="inputOnly"
        title="禁止键入"
        decorator={[FormItem]}
        component={[Stepper, { inputReadOnly: true }]}
      />
      <Field
        name="preview"
        title="阅读态"
        decorator={[FormItem]}
        component={[Stepper]}
        readPretty
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

参考 antd-mobile Stepper 官方文档。