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

步進器 Vue 元件

步進器元件

包含以下元件

  • 步進器

步進器屬性

名稱類型預設值描述
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

步進器值

步進器事件

名稱類型描述
blur函式(e)

步進器輸入 blur 處理程式

change函式(e)

步進器輸入 change 處理程式

focus函式(e)

步進器輸入 focus 處理程式

input函式(e)

步進器輸入 input 處理程式

minus函式(e)

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

plus函式(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 由 nolimits4web.