sun-parakeet

 v0.0.12

Stepper 步进器

使用 CSS Style: column-gap 设置按钮和输入框间的间距

示例

基础用法

<Stepper />

步长设置

<Stepper step={10} />

限制输入范围

最小值是0，当外部输入 value={-1} 时会被自动更改为 0。

<Stepper value={-1} min={0} max={5} />

禁用状态

<Stepper disabled />

只读状态

<Stepper readonly />

禁用输入框

<Stepper lockInput />

固定小数位数

<Stepper step={0.1} digits={1} />

自定义格式

<Stepper min={0}>
  {#snippet display(val: number)}
    {#if val > 0}
      <span>{val}</span>
      <span>瓶</span>
    {:else}
      <span>N/A</span>
    {/if}
  {/snippet}
</Stepper>

圆角风格

<Stepper theme="round" />

0值仅显示'+'

<Stepper
  bind:value={form.qty}
  min={0}
  theme="round"
  hideInput={form.qty <= 0}
  hideMinus={form.qty <= 0}
/>

Stepper

属性

属性 说明 类型 默认值
value 值 number $bindable(0)
theme 样式风格 'round' | undefined undefined
max 最大值 number undefined
min 最小值 number undefined
step 步长 number 1
digits 允许的小数位数 number 0
display 自定义内容显示 Snippet<[value: number]> undefined
hideInput 隐藏输入框 boolean false
hideMinus 隐藏减少按钮 boolean false
hidePlus 隐藏增加按钮 boolean false
lockInput 锁定输入框。只能通过按钮操作 boolean false
readonly 是否只读 boolean false
disabled 是否禁用 boolean false

事件

事件 说明 类型
onChange 变更事件 (newValue: number, oldValue: number) => void

CSS 变量

属性 说明 默认值
--sunp-size 按钮尺寸 28px
--sunp-input-width 输入框宽度 32px

后退

前进

Radio 单选框

Switch 开关