赞助商成为赞助商

步进器 Svelte 组件

步进器 Svelte 组件代表 步进器 组件。

步进器组件

包含以下组件

步进器属性

属性类型默认描述
<Stepper> 属性
init布尔值true初始化步进器
value数字0步进器值
min数字0最小值
max数字100最大值
step数字1值之间的最小步长
wraps布尔值false启用后，超过最大值增量将把值设置为最小值；类似地，低于最小值减量将把值设置为最大值
autorepeat布尔值false启用时，在您点击并按住加号/减号按钮时，它将重复增加/减少值
autorepeatDynamic布尔值false启用时，它将根据您按住按钮的时间长度增加自动重复率
input布尔值true定义它是否渲染<input> 元素
inputReadonly布尔值false使内部输入元素只读
name字符串输入元素的“name”属性
buttonsOnly布尔值false禁用步进器按钮之间的内部值容器
formatValuefunction(value)用于格式化按钮之间值元素的值的自定义函数。它必须返回新的格式化值
manualInputMode布尔值false启用手动输入模式。此模式允许从键盘输入值并用定义的精度检查小数部分。此外，在使用此模式输入时，step 参数将被忽略。
decimalPoint数字4手动输入模式下小数点后的位数。
buttonsEndInputMode布尔值true在步进器的减号或加号按钮点击时禁用手动输入模式。
disabled布尔值false定义步进器是否禁用
round布尔值false使步进器圆形
roundIos布尔值false仅为 iOS 主题使步进器圆形
roundMd布尔值false仅为 MD 主题使步进器圆形
large布尔值false使大型步进器
largeIos布尔值false仅为 iOS 主题使大型步进器
largeMd布尔值false仅为 MD 主题使大型步进器
small布尔值false使小型步进器
smallIos布尔值false仅为 iOS 主题使小型步进器
smallMd布尔值false仅为 MD 主题使小型步进器
fill布尔值false使步进器填充颜色
fillIos布尔值false仅为 iOS 主题使步进器填充颜色
fillMd布尔值false仅为 MD 主题使步进器填充颜色
raised布尔值false使步进器凸起。
raisedIos布尔值false使步进器为 iOS 主题凸起。
raisedMd布尔值false使步进器为 MD 主题凸起。

步进器事件

事件描述
<Stepper> 事件
stepperChange当步进器值发生变化时，将触发此事件
stepperMinusClick在“减号”按钮点击时，将触发此事件
stepperPlusClick在“加号”按钮点击时，将触发此事件
input在输入的input 事件中将触发此事件

步进器方法

<Stepper> 方法
.increment()增加步进器值，类似于点击它的“加号”按钮
.decremenet()减少步进器值，类似于点击它的“减号”按钮
.setValue(newValue)设置新的步进器值
.getValue()返回步进器值

示例

stepper.svelte
<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    Block,
    BlockHeader,
    List,
    ListItem,
    Stepper,
  } from 'framework7-svelte';

  let applesCount = 0;
  let orangesCount = 0;
  let meetingTime = 15;

  $: meetingTimeComputed = (() => {
    const value = meetingTime;

    const hours = Math.floor(value / 60);
    const minutes = value - hours * 60;
    const formatted = [];
    if (hours > 0) {
      formatted.push(`${hours} ${hours > 1 ? 'hours' : 'hour'}`);
    }
    if (minutes > 0) {
      formatted.push(`${minutes} minutes`);
    }
    return formatted.join(' ');
  })();

  function setApples(value) {
    applesCount = value;
  }
  function setOranges(value) {
    orangesCount = value;
  }
  function setMeetingTime(value) {
    meetingTime = value;
  }
</script>

<Page>
  <Navbar title="Stepper" />
  <BlockTitle>Shape and size</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper />
      </div>
      <div>
        <small class="display-block">Round</small>
        <Stepper round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Fill</small>
        <Stepper fill />
      </div>
      <div>
        <small class="display-block">Round Fill</small>
        <Stepper fill round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Small</small>
        <Stepper small />
      </div>
      <div>
        <small class="display-block">Small Round</small>
        <Stepper small round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Small Fill</small>
        <Stepper small fill />
      </div>
      <div>
        <small class="display-block">Small Round Fill</small>
        <Stepper small round fill />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Large</small>
        <Stepper large />
      </div>
      <div>
        <small class="display-block">Large Round</small>
        <Stepper large round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Large Fill</small>
        <Stepper large fill />
      </div>
      <div>
        <small class="display-block">Large Round Fill</small>
        <Stepper large round fill />
      </div>
    </div>
  </Block>

  <BlockTitle>Raised</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper raised />
      </div>
      <div>
        <small class="display-block">Round</small>
        <Stepper raised round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Fill</small>
        <Stepper raised fill />
      </div>
      <div>
        <small class="display-block">Round Fill</small>
        <Stepper raised fill round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Small</small>
        <Stepper raised small />
      </div>
      <div>
        <small class="display-block">Small Round</small>
        <Stepper raised small round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Small Fill</small>
        <Stepper raised small fill />
      </div>
      <div>
        <small class="display-block">Small Round Fill</small>
        <Stepper raised small round fill />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Large</small>
        <Stepper raised large />
      </div>
      <div>
        <small class="display-block">Large Round</small>
        <Stepper raised large round />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <small class="display-block">Large Fill</small>
        <Stepper raised large fill />
      </div>
      <div>
        <small class="display-block">Large Round Fill</small>
        <Stepper raised large round fill />
      </div>
    </div>
  </Block>
  <BlockTitle>Colors</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper fill color="red" />
      </div>
      <div>
        <Stepper fill round color="green" />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <Stepper fill color="blue" />
      </div>
      <div>
        <Stepper fill round color="pink" />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <Stepper fill small color="yellow" />
      </div>
      <div>
        <Stepper fill small round color="orange" />
      </div>
    </div>

    <div class="grid grid-cols-2 grid-gap margin-top">
      <div>
        <Stepper fill small color="gray" />
      </div>
      <div>
        <Stepper fill small round color="black" />
      </div>
    </div>
  </Block>
  <BlockTitle>Without input element</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper input={false} />
      </div>
      <div>
        <Stepper input={false} round />
      </div>
    </div>
  </Block>
  <BlockTitle>Min, max, step</BlockTitle>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <Stepper fill value={100} min={0} max={1000} step={100} />
      </div>
      <div>
        <Stepper fill input={false} value={5} min={0} max={10} step={0.5} />
      </div>
    </div>
  </Block>

  <BlockTitle>Autorepeat (Tap & hold)</BlockTitle>
  <BlockHeader>
    Pressing and holding one of its buttons increments or decrements the stepper’s value repeatedly.
    With dynamic autorepeat, the rate of change depends on how long the user continues pressing the
    control.
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <div class="grid grid-cols-2 grid-gap">
      <div>
        <small class="display-block">Default</small>
        <Stepper fill value={0} min={0} max={100} step={1} autorepeat={true} />
      </div>
      <div>
        <small class="display-block">Dynamic</small>
        <Stepper
          fill
          value={0}
          min={0}
          max={100}
          step={1}
          autorepeat={true}
          autorepeatDynamic={true}
        />
      </div>
    </div>
  </Block>

  <BlockTitle>Wraps</BlockTitle>
  <BlockHeader>
    In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
    decrementing below minimum value sets value to maximum value
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <Stepper fill value={0} min={0} max={10} step={1} autorepeat={true} wraps={true} />
  </Block>

  <BlockTitle>Custom value element</BlockTitle>
  <List strongIos outlineIos dividersIos>
    <ListItem title={`Apples ${applesCount}`}>
      <span slot="after">
        <Stepper buttonsOnly={true} small raised onStepperChange={setApples} />
      </span>
    </ListItem>
    <ListItem title={`Oranges ${orangesCount}`}>
      <span slot="after">
        <Stepper buttonsOnly={true} small raised onStepperChange={setOranges} />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Custom value format</BlockTitle>
  <List strongIos outlineIos dividersIos>
    <ListItem header="Meeting starts in" title={meetingTimeComputed}>
      <span slot="after">
        <Stepper
          min={15}
          max={240}
          step={15}
          value={meetingTime}
          buttonsOnly={true}
          small
          fill
          raised
          onStepperChange={setMeetingTime}
        />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Manual input</BlockTitle>
  <BlockHeader>
    It is possible to enter value manually from keyboard or mobile keypad. When click on input
    field, stepper enter into manual input mode, which allow type value from keyboard and check
    fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.
  </BlockHeader>
  <Block strong outlineIos class="text-align-center">
    <Stepper
      fill
      value={0}
      min={0}
      max={1000}
      step={1}
      autorepeat={true}
      wraps={true}
      manualInputMode={true}
      decimalPoint={2}
    />
  </Block>
</Page>
改进此文档
在本页