Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Slider ​

字段值为数字，开启 range 后为 [number, number]。支持 min、max、step、marks 等原生属性。只读映射为禁用交互，阅读态显示数字或范围。

基础使用 ​

tsx
import { FormButtonGroup, FormItem, Reset, Slider, 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 SliderBasic() {
  const [form] = useState(() => createForm({ initialValues: { volume: 30 } }))
  return (
    <FormProvider form={form}>
      <Field
        name="volume"
        title="音量"
        decorator={[FormItem]}
        component={[Slider, { min: 0, max: 100, step: 5, popover: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

范围与刻度 ​

拖动两个滑块设置范围，支持步长、刻度与标记。

tsx
import { FormButtonGroup, FormItem, Reset, Slider, 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 SliderAppearance() {
  const [form] = useState(() => createForm({ initialValues: { price: [20, 80] } }))
  return (
    <FormProvider form={form}>
      <Field
        name="price"
        title="价格区间"
        decorator={[FormItem]}
        component={[Slider, { range: true, min: 0, max: 100, step: 10, ticks: true, marks: { 0: '0', 50: '50', 100: '100' } }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormProvider>
  )
}

字段状态 ​

对比 disabled、readOnly 和 readPretty 状态。

tsx
import { FormItem, Slider } 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 SliderStatus() {
  const [form] = useState(() => createForm({ initialValues: { disabled: 30, readOnly: 30, readPretty: 30 } }))
  return (
    <FormProvider form={form}>
      <Field name="disabled" title="禁用" disabled decorator={[FormItem]} component={[Slider, { min: 0, max: 100 }]} />
      <Field name="readOnly" title="只读" readOnly decorator={[FormItem]} component={[Slider, { min: 0, max: 100 }]} />
      <Field name="readPretty" title="阅读态" readPretty decorator={[FormItem]} component={[Slider, { min: 0, max: 100 }]} />
    </FormProvider>
  )
}

API ​

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

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