ステッパー Svelte コンポーネント

ステッパーコンポーネント
ステッパー Props
例

ステッパーコンポーネント

以下のコンポーネントが含まれています

ステッパー

ステッパー Props

名前	タイプ	デフォルト	説明
buttonsOnly	boolean	false	ステッパーボタン間の内部値コンテナを無効にします
colors	object		Tailwind CSSカラースタイルクラスを持つオブジェクト
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
colors.fillActiveBgIos	string	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	string	''
colors.fillBgIos	string	'bg-primary'
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'div'	コンポーネントのHTML要素
input	boolean	false	要素をレンダリングするかどうかを定義します
inputDisabled	boolean	false	ステッパー入力が無効かどうかを定義します
inputPlaceholder	string		入力プレースホルダー
inputReadOnly	boolean	false	ステッパー入力が読み取り専用かどうかを定義します
inputType	string	'text'	入力タイプ
large	boolean	undefined	ステッパーを大きくします。 `largeIos` と `largeMaterial` を上書きします
largeIos	boolean	false	iOSテーマでステッパーを大きくします
largeMaterial	boolean	false	マテリアルテーマでステッパーを大きくします
outline	boolean	undefined	ステッパーをアウトラインにします。 `outlineIos` と `outlineMaterial` を上書きします
outlineIos	boolean	false	iOSテーマでステッパーをアウトラインにします
outlineMaterial	boolean	false	マテリアルテーマでステッパーをアウトラインにします
raised	boolean	undefined	ステッパーを隆起させます（影付き）。 `raisedIos` と `raisedMaterial` を上書きします
raisedIos	boolean	false	iOSテーマでステッパーを隆起させます（影付き）
raisedMaterial	boolean	false	マテリアルテーマでステッパーを隆起させます（影付き）
rounded	boolean	undefined	ステッパーを丸くします。 `roundedIos` と `roundedMaterial` を上書きします
roundedIos	boolean	false	iOSテーマでステッパーを丸くします
roundedMaterial	boolean	false	マテリアルテーマでステッパーを丸くします
small	boolean	undefined	ステッパーを小さくします。 `smallIos` と `smallMaterial` を上書きします
smallIos	boolean	false	iOSテーマでステッパーを小さくします
smallMaterial	boolean	false	マテリアルテーマでステッパーを小さくします
touchRipple	boolean	true	マテリアルテーマでタッチリップル効果を有効にします
value	number	0	ステッパー値
onBlur	function(e)		ステッパー入力 `blur` ハンドラー
onChange	function(e)		ステッパー入力 `change` ハンドラー
onFocus	function(e)		ステッパー入力 `focus` ハンドラー
onInput	function(e)		ステッパー入力 `input` ハンドラー
onMinus	function(e)		ステッパー "マイナス" ボタンクリックハンドラー
onPlus	function(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>