Stepper

带加减按钮的受控步进器。children 是标签，通常用来显示当前值。

import { Stepper, useState } from "onescript/views"

function QuantityStepper() {
  const [count, setCount] = useState(1)
  return (
    <Stepper
      value={count}
      onChange={setCount}
      min={1}
      max={10}
    >
      {`数量：${count}`}
    </Stepper>
  )
}

Prop	Type	说明
`value`	`number`	当前值。
`onChange`	`(value: number) => void`	用户点击加减按钮时执行。
`min`	`number`	可选下限。
`max`	`number`	可选上限，必须大于 `min`。
`step`	`number`	正数步长，默认 `1`。
`onEditingChanged`	`(editing: boolean) => void`	用户按住按钮连续调整时传入 `true`，松手时传入 `false`。
`children`	`ViewChild`	标签。

到达 min 或 max 时，对应按钮会被禁用。

自定义加减

不传 value，改传 onIncrement 和 onDecrement，即可自行处理每次点击。未提供处理函数的一侧按钮会被禁用。这两个 prop 不能与 value、onChange、min、max、step 同时使用。

import { Stepper, useState } from "onescript/views"

function Pager({ pageCount }: { pageCount: number }) {
  const [page, setPage] = useState(1)
  return (
    <Stepper
      onIncrement={page < pageCount ? () => setPage(page + 1) : undefined}
      onDecrement={page > 1 ? () => setPage(page - 1) : undefined}
    >
      {`第 ${page} 页`}
    </Stepper>
  )
}

Prop	Type	说明
`onIncrement`	`() => void`	用户点击加号时执行。
`onDecrement`	`() => void`	用户点击减号时执行。

两者至少提供一个。也支持修饰符。仅在 App 和 Action 视图会话中可用；在 Widget 中使用会报「不支持的视图类型」错误。

自定义加减

本页目录