🔥 新プロジェクトのご紹介 t0ggles - 究極のプロジェクト管理ツール！ 🔥

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

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

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

  • ステッパー

ステッパー Props

名前タイプデフォルト説明
buttonsOnlybooleanfalse

ステッパーボタン間の内部値コンテナを無効にします

colorsobject

Tailwind CSS カラークラスを持つオブジェクト

colors.activeBgIosstring'active:bg-primary'
colors.activeBgMaterialstring''
colors.fillActiveBgIosstring'active:bg-ios-primary-shade'
colors.fillActiveBgMaterialstring''
colors.fillBgIosstring'bg-primary'
colors.fillBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIosstring'text-white'
colors.fillTextMaterialstring'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipplestring'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIosstring'border-primary'
colors.outlineBorderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipplestring'touch-ripple-primary'
componentstring'div'

コンポーネントのHTML要素

inputbooleanfalse

要素をレンダリングするかどうかを定義します

inputDisabledbooleanfalse

ステッパー入力が無効かどうかを定義します

inputPlaceholderstring

入力プレースホルダー

inputReadOnlybooleanfalse

ステッパー入力が読み取り専用かどうかを定義します

inputTypestring'text'

入力タイプ

largebooleanundefined

ステッパーを大きくします。 largeIos と largeMaterial を上書きします

largeIosbooleanfalse

iOSテーマでステッパーを大きくします

largeMaterialbooleanfalse

マテリアルテーマでステッパーを大きくします

outlinebooleanundefined

ステッパーをアウトラインにします。 outlineIos と outlineMaterial を上書きします

outlineIosbooleanfalse

iOSテーマでステッパーをアウトラインにします

outlineMaterialbooleanfalse

マテリアルテーマでステッパーをアウトラインにします

raisedbooleanundefined

ステッパーを隆起させます（影付き）。 raisedIos と raisedMaterial を上書きします

raisedIosbooleanfalse

iOSテーマでステッパーを隆起させます（影付き）

raisedMaterialbooleanfalse

マテリアルテーマでステッパーを隆起させます（影付き）

roundedbooleanundefined

ステッパーを丸くします。 roundedIos と roundedMaterial を上書きします

roundedIosbooleanfalse

iOSテーマでステッパーを丸くします

roundedMaterialbooleanfalse

マテリアルテーマでステッパーを丸くします

smallbooleanundefined

ステッパーを小さくします。 smallIos と smallMaterial を上書きします

smallIosbooleanfalse

iOSテーマでステッパーを小さくします

smallMaterialbooleanfalse

マテリアルテーマでステッパーを小さくします

touchRipplebooleantrue

マテリアルテーマでタッチリップル効果を有効にします

valuenumber0

ステッパー値

ステッパー イベント

名前タイプ説明
blurfunction(e)

ステッパー入力 blur ハンドラ

changefunction(e)

ステッパー入力 change ハンドラ

focusfunction(e)

ステッパー入力 focus ハンドラ

inputfunction(e)

ステッパー入力 input ハンドラ

minusfunction(e)

ステッパー "マイナス" ボタンクリックハンドラ

plusfunction(e)

ステッパー "プラス" ボタンクリックハンドラ

例

Stepper.vue
<template>
  <k-page>
    <k-navbar title="Stepper" />


    <k-block-title>Shape and size</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Rounded Outline</div>
          <k-stepper
            :value="value"
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper :value="value" small @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper :value="value" large @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>


    <k-block-title>Raised</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <k-stepper :value="value" raised @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <k-stepper
            :value="value"
            raised
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Round Outline</div>
          <k-stepper
            :value="value"
            raised
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <k-stepper
            :value="value"
            raised
            small
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <k-stepper
            :value="value"
            raised
            large
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <k-stepper
            :value="value"
            raised
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
    <k-block-title>With Text Input</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div>
        <k-stepper
          :value="inputValue"
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
      <div>
        <k-stepper
          :value="inputValue"
          outline
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
    </k-block>
    <k-block-title>Only Buttons</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
      <k-list-item :title=="`Value is ${value}`">
        <template #after>
          <k-stepper
            :value="value"
            raised
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </k-list-item>
    </k-list>


    <k-block-title>Colors</k-block-title>
    <k-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-red"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-green"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>


      <div class="grid grid-cols-2 gap-4">
        <div>
          <k-stepper
            :value="value"
            class="k-color-brand-yellow"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <k-stepper
            :value="value"
            rounded
            class="k-color-brand-purple"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kStepper,
    kBlock,
    kBlockTitle,
    kList,
    kListItem,
  } from 'konsta/vue';
  import { ref } from 'vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kStepper,
      kBlock,
      kBlockTitle,
      kList,
      kListItem,
    },
    setup() {
      const value = ref(1);
      const increase = () => {
        value.value += 1;
      };
      const decrease = () => {
        value.value = value.value - 1 < 0 ? 0 : value.value - 1;
      };
      const inputValue = ref(1);
      const increaseInput = () => {
        const v = parseInt(inputValue.value, 10);
        if (isNaN(v)) inputValue.value = 0;
        else inputValue.value = v + 1;
      };
      const decreaseInput = () => {
        const v = parseInt(inputValue, 10);
        if (isNaN(v)) inputValue.value = 0;
        inputValue.value = v - 1 < 0 ? 0 : v - 1;
      };
      const onInputInput = (e) => {
        inputValue.value = parseInt(e.target.value, 10);
      };
      const onInputBlur = () => {
        if (isNaN(parseInt(inputValue.value, 10))) inputValue.value = 0;
      };


      return {
        value,
        increase,
        decrease,
        inputValue,
        increaseInput,
        decreaseInput,
        onInputInput,
        onInputBlur,
      };
    },
  };
</script>
コードライセンス MIT.
2022 © Konsta UI by nolimits4web.