贊助者成為贊助者

Stepper Svelte 元件

Stepper Svelte 元件代表 Stepper 元件。

Stepper 元件

包含下列元件

Stepper 屬性

屬性類型預設值說明
<Stepper> 屬性
init布林值true初始化 Stepper
value數字0Stepper 值
min數字0最小值
max數字100最大值
step數字1值之間的最小步長
wraps布林值false啟用時，超過最大值會將值設為最小值；同樣地，低於最小值會將值設為最大值
autorepeat布林值false啟用時，按住加號/減號按鈕時會重複增加/減少值
autorepeatDynamic布林值false啟用時，會根據按住按鈕的時間增加自動重複比率
input布林值true定義是否要呈現 <input> 元素
inputReadonly布林值false讓內部輸入元素成為 readonly
name字串輸入元素的「名稱」屬性
buttonsOnly布林值false停用 stepper 按鈕之間的內部值容器
formatValuefunction(value)自訂函數，用於設定按鈕之間值元素的值格式。它必須傳回新的格式化值
manualInputMode布林值false啟用手動輸入模式。此模式允許從鍵盤輸入值，並根據定義的準確度檢查小數部分。此外，在此模式下輸入時會忽略 step 參數。
decimalPoint數字4手動輸入模式時，小數點後面的位數。
buttonsEndInputMode布林值true在按 Stepper 的減號或加號按鈕時停用手動輸入模式。
disabled布林值false定義 stepper 是否停用
round布林值false讓 stepper 變成圓形
roundIos布林值false僅讓 iOS 主題的 stepper 變成圓形
roundMd布林值false僅讓 MD 主題的 stepper 變成圓形
large布林值false讓 stepper 變成大型
largeIos布林值false僅讓 iOS 主題的 stepper 變成大型
largeMd布林值false僅讓 MD 主題的 stepper 變成大型
small布林值false讓 stepper 變成小型
smallIos布林值false僅讓 iOS 主題的 stepper 變成小型
smallMd布林值false僅讓 MD 主題的 stepper 變成小型
填滿布林值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>
改善此文件
在此頁面上