Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

Rate ​

Rate 是对 antd-mobile Rate 的 Formily 适配，字段值为数字，支持半星评分和自定义外观。

基础使用 ​

通过字段初始值设置评分，点击星星更新字段值。默认允许再次点击当前评分清空为 0。

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

const form = createForm({ initialValues: { score: 3 } })

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

export default function RateBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="score"
        title="服务评分"
        decorator={[FormItem]}
        component={[Rate]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

半星与自定义外观 ​

allowHalf 开启半星评分，allowClear: false 禁止再次点击清空。通过 count、character 和 CSS 变量自定义外观。

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

const form = createForm({ initialValues: { half: 2.5, custom: 3 } })

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

export default function RateAppearance() {
  return (
    <FormProvider form={form}>
      <Field
        name="half"
        title="半星评分"
        decorator={[FormItem]}
        component={[Rate, { allowHalf: true, allowClear: false }]}
      />
      <Field
        name="custom"
        title="推荐程度"
        decorator={[FormItem]}
        component={[Rate, {
          count: 6,
          character: '♥',
          style: { '--star-size': '28px', '--active-color': '#ff4d6a' },
        }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

字段状态 ​

支持 Formily 字段的 disabled、readOnly 和 readPretty 状态，均以只读评分展示。antd-mobile Rate 没有原生 disabled 属性，封装将其映射为 readOnly，不额外添加置灰样式。

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

const form = createForm({ initialValues: { disabled: 3, readOnly: 4, readPretty: 4.5 } })

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

export default function RateStatus() {
  return (
    <FormProvider form={form}>
      <Field
        name="disabled"
        title="禁用"
        disabled
        decorator={[FormItem]}
        component={[Rate]}
      />
      <Field
        name="readOnly"
        title="只读"
        readOnly
        decorator={[FormItem]}
        component={[Rate]}
      />
      <Field
        name="readPretty"
        title="阅读态"
        readPretty
        decorator={[FormItem]}
        component={[Rate, { allowHalf: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>查看结果</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

参考 antd-mobile Rate 官方文档。