🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

步進器 Svelte 元件

步進器元件

包含以下元件

  • 步進器

步進器屬性

名稱類型預設值描述
buttonsOnly布林值false

停用步進器按鈕之間的內部值容器

colors物件

具有 Tailwind CSS 顏色類別的物件

colors.activeBgIos字串'active:bg-primary'
colors.activeBgMaterial字串''
colors.fillActiveBgIos字串'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial字串''
colors.fillBgIos字串'bg-primary'
colors.fillBgMaterial字串'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos字串'text-white'
colors.fillTextMaterial字串'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple字串'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos字串'border-primary'
colors.outlineBorderMaterial字串'border-md-light-outline dark:border-md-dark-outline'
colors.textIos字串'text-primary'
colors.textMaterial字串'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple字串'touch-ripple-primary'
component字串'div'

元件的 HTML 元素

input布林值false

定義是否應呈現元素

inputDisabled布林值false

定義是否停用步進器輸入

inputPlaceholder字串

輸入預留位置

inputReadOnly布林值false

定義步進器輸入是否為唯讀

inputType字串'text'

輸入類型

large布林值未定義

使步進器變大。覆蓋 largeIos 和 largeMaterial

largeIos布林值false

在 iOS 主題中使步進器變大

largeMaterial布林值false

在 Material 主題中使步進器變大

outline布林值未定義

使步進器為外框。覆蓋 outlineIos 和 outlineMaterial

outlineIos布林值false

在 iOS 主題中使步進器為外框

outlineMaterial布林值false

在 Material 主題中使步進器為外框

raised布林值未定義

使步進器凸起（帶陰影）。覆蓋 raisedIos 和 raisedMaterial

raisedIos布林值false

在 iOS 主題中使步進器凸起（帶陰影）

raisedMaterial布林值false

在 Material 主題中使步進器凸起（帶陰影）

rounded布林值未定義

使步進器變圓。覆蓋 roundedIos 和 roundedMaterial

roundedIos布林值false

在 iOS 主題中使步進器變圓

roundedMaterial布林值false

在 Material 主題中使步進器變圓

small布林值未定義

使步進器變小。覆蓋 smallIos 和 smallMaterial

smallIos布林值false

在 iOS 主題中使步進器變小

smallMaterial布林值false

在 Material 主題中使步進器變小

touchRipple布林值true

在 Material 主題中啟用觸摸波紋效果

value數字0

步進器值

onBlur函式(e)

步進器輸入 blur 處理常式

onChange函式(e)

步進器輸入 change 處理常式

onFocus函式(e)

步進器輸入 focus 處理常式

onInput函式(e)

步進器輸入 input 處理常式

onMinus函式(e)

步進器「減號」按鈕點擊處理常式

onPlus函式(e)

步進器「加號」按鈕點擊處理常式

範例

Stepper.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Stepper,
    Block,
    BlockTitle,
    List,
    ListItem,
  } from 'konsta/svelte';


  let value = 1;
  const increase = () => {
    value = value + 1;
  };
  const decrease = () => {
    value = value - 1 < 0 ? 0 : value - 1;
  };


  let inputValue = 1;
  const increaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) inputValue = 0;
    else inputValue = v + 1;
  };
  const decreaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) inputValue = 0;
    inputValue = v - 1 < 0 ? 0 : v - 1;
  };
  const onInputChange = (e) => {
    inputValue = e.target.value;
  };
  const onInputBlur = () => {
    if (isNaN(parseInt(inputValue, 10))) inputValue = 0;
  };
</script>


<Page>
  <Navbar title="Stepper" />


  <BlockTitle>Shape and size</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <div class="block text-xs mb-1">Default</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round</div>
        <Stepper {value} rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Outline</div>
        <Stepper {value} outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Rounded Outline</div>
        <Stepper {value} outline rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} small />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Round</div>
        <Stepper {value} small rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small Outline</div>
        <Stepper {value} small outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Rounded Outline</div>
        <Stepper
          {value}
          small
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} large />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Round</div>
        <Stepper {value} large rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large Outline</div>
        <Stepper {value} large outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Rounded Outline</div>
        <Stepper
          {value}
          large
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>


  <BlockTitle>Raised</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <div class="block text-xs mb-1">Default</div>
        <Stepper {value} raised onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round</div>
        <Stepper {value} raised rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Outline</div>
        <Stepper {value} raised outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round Outline</div>
        <Stepper
          {value}
          raised
          outline
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small</div>
        <Stepper {value} raised small onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Round</div>
        <Stepper
          {value}
          raised
          small
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small Outline</div>
        <Stepper
          {value}
          raised
          small
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Rounded Outline</div>
        <Stepper
          {value}
          raised
          small
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large</div>
        <Stepper {value} raised large onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Round</div>
        <Stepper
          {value}
          raised
          large
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large Outline</div>
        <Stepper
          {value}
          raised
          large
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Rounded Outline</div>
        <Stepper
          {value}
          raised
          large
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>
  <BlockTitle>With Text Input</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div>
      <Stepper
        value={inputValue}
        input
        onChange={onInputChange}
        onBlur={onInputBlur}
        onPlus={increaseInput}
        onMinus={decreaseInput}
      />
    </div>
    <div>
      <Stepper
        value={inputValue}
        outline
        input
        onChange={onInputChange}
        onBlur={onInputBlur}
        onPlus={increaseInput}
        onMinus={decreaseInput}
      />
    </div>
  </Block>
  <BlockTitle>Only Buttons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        outline
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        raised
        outline
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
  </List>


  <BlockTitle>Colors</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <Stepper
          {value}
          class="k-color-brand-red"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <Stepper
          {value}
          rounded
          class="k-color-brand-green"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>


    <div class="grid grid-cols-2 gap-4">
      <div>
        <Stepper
          {value}
          class="k-color-brand-yellow"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <Stepper
          {value}
          rounded
          class="k-color-brand-purple"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>
</Page>
程式碼以授權方式許可 MIT.
2022 © Konsta UI by nolimits4web.