フォームスピンボタン

スピンボタンは、BootstrapVueのカスタム数値範囲フォームコントロールです。スピンボタンを使用すると、最小値と最大値の範囲内で、オプションのステップ値を使用して数値を増減できます。

BootstrapVueでは v2.5.0 から利用可能です。

概要

コンポーネント <b-form-spinbutton> は WAI-ARIA準拠であり、キーボード操作を可能にし、水平（デフォルト）と垂直の両方のレイアウトをサポートしています。

範囲入力タイプと同様に、BootstrapVueの <b-form-spinbutton> は、ユーザーが値を入力することを許可しません。

<template>
  <div>
    <label for="demo-sb">Spin Button</label>
    <b-form-spinbutton id="demo-sb" v-model="value" min="1" max="100"></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-demo.vue -->

上矢印キーと下矢印キーを使用して、値を増減できます。

ネイティブブラウザのフォーム送信を介して送信するには、nameプロップを介してスピンボタンに名前を設定する必要があります。これにより、スピンボタンの現在の値を含む隠し入力が作成されます。スピンボタンに値がない場合、隠し入力の値は空文字列になります。

`v-model` 値

v-model は常に値を数値として返します。v-model は、初期値が設定されていない場合はnullになる可能性があります。

初期値がnullの場合、スピンボタンには値が表示されません。placeholderプロップを使用して、スピンボタンに値がない場合（つまりplaceholder="--"）に文字列を表示します。

最小値、最大値、ステップ

スピンボタンのデフォルト範囲は1から100で、minプロップとmaxプロップを設定することで変更できます。デフォルトのステップ増分は1で、stepプロップ（小数値を許可）を介して変更できます。

stepが設定されている場合、値は常にステップサイズと最小値の倍数になります。

<template>
  <div>
    <label for="sb-step">Spin button with step of 0.25</label>
    <b-form-spinbutton
      id="sb-step"
      v-model="value"
      min="0"
      max="10"
      step="0.25"
    ></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      }
    }
  }
</script>

<!-- b-form-spinbutton-step.vue -->

数値の循環

デフォルトでは、値がmax値に増加すると、増分ボタンを押しても効果はありません。同様に、値がmin値の場合、減分ボタンを押しても効果はありません。

スピンボタンを増加時にmaxからminに（または減少時にminからmaxに）循環させるには、wrapプロップをtrueに設定します。

<template>
  <div>
    <label for="sb-wrap">Wrapping value spin button</label>
    <b-form-spinbutton id="sb-wrap" wrap min="1" max="25" placeholder="--"></b-form-spinbutton>
  </div>
</template>

<!-- b-form-spinbutton-wrap.vue -->

スタイル

サイズ

他のフォームコントロールと同様に、<b-form-spinbutton>は、sizeプロップをそれぞれ'sm'または'lg'に設定することで、小型と大型のサイズをサポートします。

<template>
  <div>
    <label for="sb-small">Spin button - Small size</label>
    <b-form-spinbutton id="sb-small" size="sm" placeholder="--" class="mb-2"></b-form-spinbutton>

    <label for="sb-default">Spin button - Default size</label>
    <b-form-spinbutton id="sb-default" placeholder="--" class="mb-2"></b-form-spinbutton>

    <label for="sb-large">Spin button - Large size</label>
    <b-form-spinbutton id="sb-large" size="lg" placeholder="--" class="mb-2"></b-form-spinbutton>
  </div>
</template>

<!-- b-form-spinbutton-size.vue -->

インライン

<template>
  <div>
    <label for="sb-inline">Inline spin button</label>
    <b-form-spinbutton id="sb-inline" v-model="value" inline></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-inline.vue -->

スピンボタンは、表示されている値に合わせて幅を自動的に調整します。幅の制御または設定の詳細については、以下の幅セクションを参照してください。

垂直

スピンボタンは垂直モードで配置できます。

<template>
  <div>
    <label for="sb-vertical">Vertical spin button</label><br>
    <b-form-spinbutton id="sb-vertical" v-model="value" vertical></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-vertical.vue -->

垂直スピンボタンは、sizeプロップを使用してサイズ変更することもできます。垂直モードの場合、スピンボタンはインライン要素としてレンダリングされます。

幅

(verticalまたはinlineではない)コントロールは、親コンテナの最大幅まで拡張されます。w-25、w-50、w-75などのユーティリティクラスで幅を制御したり、スタイルを使用して幅を設定したりできます。

verticalまたはinlineのいずれかが設定されている場合、コントロールは表示されている値に基づいて幅を調整します。CSSスタイルを使用して、コントロールの全体の幅を制御できます（例：style="width: 10rem;"）。

数値のフォーマットとロケール

デフォルトでは、<b-form-spinbutton>は、ユーザーのブラウザのデフォルトロケールで表示される数値をフォーマットします。localeプロップを使用してロケール（またはロケールの配列）を指定することで、ローカライズされたフォーマットを変更できます。数値フォーマットのローカライズは、Intl.NumberFormatを介して実行されます。使用可能なロケールは、ブラウザの実装によって異なります。ローカライズは、ユーザーへの値の表示のみを制御し、v-modelには影響しません。

<template>
  <div>
    <label for="sb-locales">Locale</label>
    <b-form-select id="sb-locales" v-model="locale" :options="locales"></b-form-select>
    <label for="sb-local" class="mt-2">Spin button with locale</label>
    <b-form-spinbutton
      id="sb-locale"
      v-model="value"
      :locale="locale"
      min="0"
      max="10"
      step="0.125"
    ></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        locale: 'fr-CA',
        locales: [
          { value: 'en', text: 'English' },
          { value: 'de', text: 'German' },
          { value: 'fr-CA', text: 'French (Canadian)' },
          { value: 'fa', text: 'Persian' },
          { value: 'ar-EG', text: 'Arabic (Egyptian)' }
        ]
      }
    }
  }
</script>

<!-- b-form-spinbutton-locale.vue -->

または、表示される値をフォーマットする独自の数字フォーマッター関数を提供することもできます。これは、数値ではなくテキストを表示する場合、またはIntl.NumberFormatの異なる機能を実装する場合に役立ちます。

フォーマッター関数を提供するには、formatter-fnプロップをメソッド参照に設定します。フォーマッターには、現在の値である単一の引数が渡されます。フォーマッターは、ユーザーに表示される値のみに影響し、v-modelには影響しないことに注意してください。

<template>
  <div>
    <label for="sb-days" class="mt-2">Spin button with formatter</label>
    <b-form-spinbutton
      id="sb-days"
      v-model="value"
      :formatter-fn="dayFormatter"
      min="0"
      max="6"
      wrap
    ></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
      }
    },
    methods: {
      dayFormatter(value) {
        return this.days[value]
      }
    }
  }
</script>

<!-- b-form-spinbutton-formatter.vue -->

無効状態と読み取り専用状態

disabledプロップを設定すると、コンポーネントは無効な非対話型状態になります。readonlyプロップは、コンポーネントを読み取り専用状態（フォーカス可能だが、ユーザーが値を変更できない）にします。

<template>
  <b-row>
    <b-col md="6" class="mb-2">
      <label for="sb-disabled">Disabled spin button</label>
      <b-form-spinbutton id="sb-disabled" v-model="value" disabled></b-form-spinbutton>
    </b-col>
    <b-col md="6" class="mb-2">
      <label for="sb-readonly" class="">Readonly spin button</label>
      <b-form-spinbutton id="sb-readonly" v-model="value" readonly></b-form-spinbutton>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-disabled-readonly.vue -->

無効なスピンボタンは、ネイティブブラウザのフォーム送信中に送信されませんが、読み取り専用のスピンボタンは送信されます（nameプロップを介して名前が設定されている限り）。

バリデーション状態

null値をデフォルトで使用し、ユーザーが値を選択していない場合、stateプロップを使用して、コンポーネントにコンテキストバリデーションスタイルの1つを適用できます。

trueは、コンポーネントに有効なスタイルを適用します。
falseは、コンポーネントに無効なスタイルを適用します。
nullは、コンテキストスタイルを適用しません（デフォルト）。

必須プロップ

必須プロップは、コンポーネントにaria-required="true"属性を生成するだけで、フォーム送信時に検証を実行しないことに注意してください。アプリケーションロジックでv-modelを検証する必要があります。

requiredプロップが設定され、v-modelがnullの場合、aria-invalid="true"属性がコンポーネントにレンダリングされることに注意してください。

イベント

inputイベントはv-modelを更新するために使用され、値が変更されるたびに発行されます。

changeイベントは、ユーザーが増分ボタンまたは減分ボタンを離したとき、またはユーザーが下矢印キーまたは上矢印キーを離したときに一度発行されます。これは、入力のデバウンスが必要な場合に便利です。

次の例は、inputイベントとchangeイベントの違いを示しています。増分ボタンまたは減分ボタンをクリックして押し続け（または上下矢印キーを使用）ます。

<template>
  <div>
    <label for="sb-input">Spin button - input and change events</label>
    <b-form-spinbutton
      id="sb-input"
      v-model="value1"
      @change="value2 = $event"
      wrap
    ></b-form-spinbutton>
    <p>Input event: {{ value1 }}</p>
    <p>Change event: {{ value2 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: null
      }
    }
  }
</script>

<!-- b-form-spinbutton-events.vue -->

アクセシビリティ

スピンボタンにフォーカスがある場合、次のキーボードコントロールを使用できます。

Home 値をmin値に設定します。
End 値をmax値に設定します。
上矢印 ステップ量だけ値を増やします。
下矢印 ステップ量だけ値を減らします。
PageUp 値をステップ量にrepeat-step-multiplier量を掛けた値だけ増やします。
PageDown 値をステップ量にrepeat-step-multiplier量を掛けた値だけ減らします。

上矢印、下矢印、PageUp、またはPageDownキーを押して押し続けると、増分または減分が自動的に繰り返されます（最初の遅延の後）。上矢印キーまたは下矢印キーを長時間押し続けると、増分または減分の量がrepeat-step-multiplier量だけ掛けられます。

repeat-delay、repeat-threshold、およびrepeat-intervalは、上矢印キーまたは下矢印キーのみに適用されることに注意してください。

実装に関する注記

<b-form-spinbutton>は、Bootstrap v4のユーティリティクラス（ボーダー、配置、フレックス）、form-controlとボタンのクラス、および追加のカスタムBootstrapVue SCSS/CSSを組み合わせて使用しています。

こちらも参照してください

範囲入力タイプ

コンポーネントリファレンス

`<b-form-spinbutton>`

v2.5.0以降

ソースコードを見る

<b-form-spinbutton> コンポーネントエイリアス
<b-form-spinbutton> プロパティ
<b-form-spinbutton> v-model
<b-form-spinbutton> スロット
<b-form-spinbutton> イベント

コンポーネントエイリアス

<b-form-spinbutton> は、以下のエイリアスでも使用できます。

<b-spinbutton>

注：コンポーネントエイリアスは、BootstrapVue全体をインポートする場合、またはコンポーネントグループプラグインを使用する場合のみ使用できます。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ (クリックして昇順にソート)	型 (クリックして昇順にソート)	デフォルト	説明
`aria-controls`	`文字列`		このコンポーネントが別のコンポーネントまたは要素を制御する場合、制御されるコンポーネントまたは要素のIDをここに設定します。
`aria-label`	`文字列`		スピンボタンの`aria-label`属性に配置する値
`disabled`	`ブール値`	`false`	コンポーネントを無効状態にします。
`form`	`文字列`		フォームコントロールが属するフォームのID。コントロールの`form`属性を設定します。
`formatter-fn`	`関数`		表示される値をフォーマットするためのメソッドへの参照。現在の値を単一引数として渡されます。
`id`	`文字列`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`inline`	`ブール値`	`false`	設定されている場合、コンポーネントをインライン要素としてレンダリングします。
`label-decrement`	`文字列`	`'Decrement'`	減少ボタンの`aria-label`属性に使用されるテキスト
`label-increment`	`文字列`	`'Increment'`	増加ボタンの`aria-label`属性に使用されるテキスト
`locale`	`配列` または `文字列`		数値のフォーマットに使用するロケールを指定します。ブラウザのロケールをデフォルトで使用します。内部フォーマッタを使用する場合にのみ適用されます。
`max`	`数値` または `文字列`	`100`	選択できる最大値。`min`プロパティよりも大きくなければなりません。負の数は許容されます。
`min`	`数値` または `文字列`	`1`	選択できる最小値。負の数は許容されます。
`name`	`文字列`		フォームコントロールの`name`属性の値を設定します。
`placeholder`	`文字列`		v-modelが`null`の場合に表示する値
`readonly`	`ブール値`	`false`	コンポーネントを読み取り専用状態にします。
`repeat-delay`	`数値` または `文字列`	`500`	自動繰り返し増分または減分が発生する前のミリ秒単位の遅延。正の整数でなければなりません。ユーザーがクリック/キーを押して保持する必要があります。
`repeat-interval`	`数値` または `文字列`	`100`	増分または減分の繰り返し間のミリ秒単位の間隔。正の整数でなければなりません。
`repeat-step-multiplier`	`数値` または `文字列`	`4`	`repeat-threshold`に達した後にジャンプするステップ数。正の整数でなければなりません。この値は、ページアップキーとページダウンキーにも使用されます。
`repeat-threshold`	`数値` または `文字列`	`10`	ステップサイズを`repeat-step-multiplier`で増やす前に発生する繰り返し回数。正の整数でなければなりません。
`size`	`文字列`		コンポーネントの外観のサイズを設定します。'sm'、'md'(デフォルト)、または'lg'
`state`	`ブール値`	`null`	コンポーネントの検証状態の外観を制御します。有効な場合は`true`、無効な場合は`false`、検証状態がない場合は`null`。
`step`	`数値` または `文字列`	`1`	値が従わなければならない粒度を指定する正の数。
`value` v-model	`ブール値` または `数値`		スピンボタンの値。v-modelにバインドされます。
`vertical`	`ブール値`	`false`	設定されている場合、コンポーネントを垂直レイアウトでレンダリングします。
`wrap`	`ブール値`	`false`	設定されている場合、最小値または最大値に達したときに値をラップアラウンドできます。

`v-model`

プロパティ	イベント
`value`	`input`

スロット

名前	スコープ付き	説明
`decrement` v2.8.0以降		減少ボタンに配置するカスタムコンテンツ
`increment` v2.8.0以降		増加ボタンに配置するカスタムコンテンツ

イベント

イベント	引数	説明
`change`	`value` - スピンボタンの現在の値	ユーザーがマウスボタンまたはキーを離したときに送信されます。
`input`	`value` - スピンボタンの現在の値	各値の変更時にv-modelを更新するために送信されます。

個々のコンポーネントのインポート

以下の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント	名前付きエクスポート	インポートパス
`<b-form-spinbutton>`	`BFormSpinbutton`	`bootstrap-vue`

例

import { BFormSpinbutton } from 'bootstrap-vue'
Vue.component('b-form-spinbutton', BFormSpinbutton)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントエイリアスも含まれています。

名前付きエクスポート	インポートパス
`FormSpinbuttonPlugin`	`bootstrap-vue`

例

import { FormSpinbuttonPlugin } from 'bootstrap-vue'
Vue.use(FormSpinbuttonPlugin)

概要

v-model 値

最小値、最大値、ステップ

数値の循環

スタイル

サイズ

インライン

垂直

幅

数値のフォーマットとロケール

無効状態と読み取り専用状態

バリデーション状態

必須プロップ

イベント

アクセシビリティ

実装に関する注記

こちらも参照してください

コンポーネントリファレンス

コンポーネントエイリアス

プロパティ

v-model

スロット

イベント

個々のコンポーネントのインポート

Vue.jsプラグインとしてのインポート

`v-model` 値

`v-model`