フォーム評価

BootstrapVueのカスタム星評価コンポーネント<b-form-rating>は、評価値を入力または表示するためのものです。このコンポーネントは完全にWAI-ARIAアクセシブルで、キーボード操作をサポートしています。

v2.12.0以降、BootstrapVueで利用可能です。

概要

評価値の範囲は1から許可されている星の数までです（デフォルトの星の数は5、最小の星の数は3です）。<b-form-rating>はBootstrapクラスform-controlを使用しているため、インプットグループ内に簡単に配置できます。

<b-form-rating>には、インタラクティブと読み取り専用の2つの主要なモードがあります。

インタラクティブモードでは、ユーザーは1から星の数（デフォルトは5）までの評価を整数単位で選択できます。

インタラクティブ評価（入力モード）

<template>
  <div>
    <b-form-rating v-model="value"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating.vue -->

読み取り専用モードは、集計された評価を表示するために使用され、half星をサポートします。

読み取り専用（非インタラクティブ）評価

<template>
  <div>
    <b-form-rating v-model="value" readonly></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-non-interactive.vue -->

スタイリング

バリアントと色

variantプロパティを介して、Bootstrapテーマのカラーバリアントの1つを評価アイコンに簡単に適用できます。デフォルトでは、デフォルトのフォームコントロールテキストの色を使用します。

<template>
  <div>
    <b-form-rating v-model="value" variant="warning" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="success" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="danger" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="primary" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="info" class="mb-2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-variant.vue -->

カスタムカラーを適用するには、標準のCSSカラー名、16進カラー値（#...）またはRGB/RGBA（rgb(...)/rgba(...)）カラー値を受け入れるcolorプロパティを使用します。

<template>
  <div>
    <b-form-rating v-model="value" color="indigo" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="#ff00ff" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="rgb(64, 192, 128)" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="rgba(64, 192, 128, 0.75)" class="mb-2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-color.vue -->

注意事項

プロパティcolorは、variantプロパティよりも優先されます。
バリアントは、アイコンのtext-{variant}ユーティリティクラスに変換されます。

星の数

デフォルトでは、<b-form-rating>は5つの星に設定されています。starsプロパティを使用して星の数を変更できます。最小許容星数は3です。

<template>
  <div>
    <label for="rating-10">Rating with 10 stars:</label>
    <b-form-rating id="rating-10" v-model="value10" stars="10"></b-form-rating>
    <p class="mt-2">Value: {{ value10 }}</p>

    <label for="rating-7">Rating with 7 stars:</label>
    <b-form-rating id="rating-7" v-model="value7" stars="7"></b-form-rating>
    <p class="mt-2">Value: {{ value7 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value10: null,
        value7: null,
      }
    }
  }
</script>

<!-- b-form-rating-stars.vue -->

値を表示

デフォルトでは、<b-form-rating>は現在の数値を表示しません。現在の値を表示するには、show-valueプロパティをtrueに設定するだけです。精度（小数点以下の桁数）を制御するには、precisionプロパティを表示する小数点以下の桁数に設定します。precision設定は、readonlyモードで集計または平均評価値を表示する場合に役立ちます。

<template>
  <div>
    <b-form-rating v-model="value" show-value></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value.vue -->

精度を設定した場合

<template>
  <div>
    <b-form-rating v-model="value" readonly show-value precision="2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value-precision.vue -->

最大値を表示

2.13.0+

オプションで、プロパティshow-value-maxをtrueに設定して、可能な最大評価も表示します。

<template>
  <div>
    <b-form-rating
      v-model="value"
      readonly
      show-value
      show-value-max
      precision="2"
    ></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value-max.vue -->

サイズ制御

小さめまたは大きめの評価コントロールが必要ですか？プロパティsizeをそれぞれ'sm'または'lg'に設定するだけです。

<template>
  <div>
    <label for="rating-sm">Small rating</label>
    <b-form-rating id="rating-sm" v-model="value" size="sm"></b-form-rating>

    <label for="rating-md" class="mt-3">Default rating (medium)</label>
    <b-form-rating id="rating-md" v-model="value"></b-form-rating>

    <label for="rating-lg" class="mt-3">Large rating</label>
    <b-form-rating id="rating-lg" v-model="value" size="lg"></b-form-rating>

    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

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

インラインモード

デフォルトでは、<b-form-rating>は親コンテナの幅の100％を占有します。状況によっては、カスタム入力がそのコンテンツに必要なスペースのみを占有することを好む場合があります。inlineプロパティをtrueに設定して、コンポーネントをインラインモードでレンダリングするだけです。

<template>
  <div>
    <label for="rating-inline">Inline rating:</label>
    <b-form-rating id="rating-inline" inline value="4"></b-form-rating>
  </div>
</template>

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

ボーダーレス

デフォルトでは、<b-form-rating>には標準のBootstrapフォームコントロールスタイリングがあります。デフォルトのフォームコントロールのボーダーを無効にするには、no-borderプロパティをtrueに設定するだけです。

<template>
  <div>
    <label for="rating-sm-no-border">Small rating with no border</label>
    <b-form-rating id="rating-sm-no-border" v-model="value" no-border size="sm"></b-form-rating>

    <label for="rating-md-no-border" class="mt-3">Default rating (medium) with no border</label>
    <b-form-rating id="rating-md-no-border" v-model="value" no-border></b-form-rating>

    <label for="rating-lg-no-border" class="mt-3">Large rating with no border</label>
    <b-form-rating id="rating-lg-no-border" v-model="value" no-border size="lg"></b-form-rating>

    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-no-border.vue -->

注意事項

アクセシビリティ上の理由から、no-border設定に関係なく、評価コンポーネントがフォーカスを持つとフォーカスリングが表示されます。

無効

ユーザーが評価値を選択する前に追加情報が必要な場合は、disabledプロパティをtrueに設定して、コンポーネント上のユーザーインタラクションを無効にするだけです。

<template>
  <div>
    <label for="rating-disabled">Disabled rating</label>
    <b-form-rating id="rating-disabled" value="2.75" disabled></b-form-rating>
  </div>
</template>

<!-- b-form-rating-disabled.vue -->

読み取り専用

読み取り専用の評価はフォーカス可能ですが、インタラクティブではありません。この状態は、集計されたまたは平均評価値を表示する場合に役立ちます。小数値が許可されており、valueが整数でない場合、ハーフアイコンの表示になります（ハーフアイコンのしきい値は0.5です）。

<template>
  <div>
    <label for="rating-readonly">Readonly rating</label>
    <b-form-rating
      id="rating-readonly"
      value="3.6536"
      readonly
      show-value
      precision="3"
    ></b-form-rating>
  </div>
</template>

<!-- b-form-rating-readonly.vue -->

クリアボタン

オプションで、show-clearプロパティを使用してクリアアイコンを表示します。クリアアイコンをクリックすると、値はnullに設定されます。

<template>
  <div>
    <b-form-rating v-model="value" show-clear show-value></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-clear.vue -->

注意事項

プロパティreadonlyまたはdisabledが設定されている場合、クリアアイコンは表示されません。

アイコン

デフォルトでは、<b-form-rating>はBootstrapアイコンのアイコン'star'、'star-half'、'star-fill'、およびアイコン'x'（オプションのクリアボタン用）を使用します。icon-empty、icon-half、icon-full、およびicon-clearプロパティを使用して、使用する代替Bootstrapアイコンを指定できます。これらのプロパティは、Bootstrapアイコンのケバブケース名を受け入れ、対応するアイコンコンポーネントがローカルまたはグローバルに登録/インストールされている必要があります。

<template>
  <div>
    <b-form-rating
      icon-empty="heart"
      icon-half="heart-half"
      icon-full="heart-fill"
      icon-clear="slash-circle"
      show-clear
      variant="danger"
    ></b-form-rating>
  </div>
</template>

<!-- b-form-rating-icons.vue -->

または、'icon-empty'、'icon-half'、'icon-full'、および'icon-clear'スコープ付きスロットを介して独自のコンテンツを提供できます。

フォーム送信

標準フォーム送信を介して評価値を送信する場合は、nameプロパティを目的のフォームフィールド名に設定します。現在の値（または値がない場合は空の文字列）を持つ非表示の入力が生成されます。

インプットグループでの使用

以下は、インプットグループに<b-form-rating>を配置する例です。

<template>
  <div>
    <b-input-group>
      <b-input-group-prepend>
        <b-button @click="value = null">Clear</b-button>
      </b-input-group-prepend>
      <b-form-rating v-model="value" color="#ff8800"></b-form-rating>
      <b-input-group-append>
        <b-input-group-text class="justify-content-center" style="min-width: 3em;">
          {{ value }}
        </b-input-group-text>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

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

<!-- b-form-rating-input-group.vue -->

国際化

localeが指定されている場合、表示される値（show-valueプロパティがtrueの場合）は、ブラウザのデフォルトのロケールになります。ロケールを変更するには、localeプロパティを優先ロケール、または優先ロケール（最も優先度の高いロケールが最初）の配列に設定するだけです。これにより、オプションの表示値とコンポーネントの左から右または右から左の向きに影響します。

<template>
  <div>
    <b-form-select v-model="locale" :options="locales" class="mb-2"></b-form-select>
    <b-form-rating v-model="value" :locale="locale" show-value precision="1"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-i18n.vue -->

実装上の注意

評価コントロールは、Bootstrap v4のform-control*、d-*（display）、border-*およびtext-{variant}クラス、ならびに適切なスタイリングのためのBootstrapVueのカスタムCSSを使用します。

コントロールのルート要素は<output>要素であり、これにより<label>要素をそれに関連付けることができます。

アクセシビリティ

スクリーンリーダーのユーザーにとって、<b-form-rating>はスライダータイプの入力入力として表示されます。

キーボードナビゲーションを使用して評価値を選択し、range入力のキーボードコントロールを模倣します。

左または下は、評価値を1ずつデクリメントします。
右または上は、評価値を1ずつインクリメントします。
locale が右から左に記述する言語に解決されると、Left と Right の動作が逆になります。

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

`<b-form-rating>`

v2.12.0+

ソースを表示

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

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

<b-form-rating> は以下のエイリアスを介して使用することもできます。

<b-rating>

注: コンポーネントエイリアスは、BootstrapVue のすべてをインポートするか、コンポーネントグループプラグインを使用する場合にのみ利用可能です。

プロパティ

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

プロパティ (クリックして昇順にソート)	型 (クリックして昇順にソート)	デフォルト	説明
`color`	`String`		バリアントの代わりに使う CSS カラー。HEX または RGB/RGBA 文字列を受け付けます
`disabled`	`Boolean`	`false`	`true` に設定すると、コンポーネントの機能が無効になり、無効状態になります
`form`	`String`		フォームコントロールが属するフォームの ID。コントロールの `form` 属性を設定します
`icon-clear`	`String`	`'x'`	クリアボタンに使用するBootstrapアイコンの名前。アイコンはコンポーネントまたはグローバルに登録されている必要があります
`icon-empty`	`String`	`'star'`	空のアイコンに使用するBootstrapアイコンの名前。アイコンはコンポーネントまたはグローバルに登録されている必要があります
`icon-full`	`String`	`'star-fill'`	満杯アイコンに使用するBootstrapアイコンの名前。アイコンはコンポーネントまたはグローバルに登録されている必要があります
`icon-half`	`String`	`'star-half'`	半分のアイコンに使用するBootstrapアイコンの名前。アイコンはコンポーネントまたはグローバルに登録されている必要があります
`id`	`String`		レンダリングされたコンテンツに `id` 属性を設定するために使用され、必要に応じて追加の要素 ID を生成するためのベースとして使用されます
`inline`	`Boolean`	`false`	`true` の場合、ブロック (100% 幅) 要素ではなくインライン要素としてレンダリングします
`locale`	`Array` または `String`		prop `show-value` が設定されている場合に値を表示するときに使用するロケール（またはロケール）。デフォルトはブラウザのデフォルトロケールです
`name`	`String`		フォームコントロールの `name` 属性の値を設定します
`no-border`	`Boolean`	`false`	`true` の場合、デフォルトの境界線を無効にします
`precision`	`Number` または `String`		表示する小数点以下の桁数を指定します。デフォルトは精度が定義されていません
`readonly`	`Boolean`	`false`	`true` の場合、レーティングを読み取り専用にします。 `true` の場合、小数レーティング値が許可されます（半分のアイコンが表示されます）
`show-clear`	`Boolean`	`false`	`true` の場合、クリア値のアイコンボタンを表示します
`show-value`	`Boolean`	`false`	`true` の場合、コントロールに現在の評価値を表示します
`show-value-max` v2.13.0+	`Boolean`	`false`	`true` に設定され、prop `show-value` が `true` の場合、フォーマットされた値に可能な最大星評価を含めます
`size`	`String`		コンポーネントの外観のサイズを設定します。 'sm'、'md' (デフォルト)、または 'lg'
`stars`	`Number` または `String`	`5`	表示する星の数。最小値は `3`、デフォルトは `5` です
`value` v-model	`Number` または `String`		評価値。これは v-model です
`variant`	`String`		Bootstrap テーマカラーバリアントの 1 つをコンポーネントに適用します

`v-model`

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

スロット

名前	スコープ付き	説明
`icon-clear`	いいえ	オプションのクリアボタンのコンテンツ
`icon-empty`		空のアイコンのコンテンツ
`icon-full`		満杯アイコンのコンテンツ
`icon-half`		半分のアイコンのコンテンツ

イベント

イベント	引数	説明
`change`	`value` - 現在の評価値	v-model を更新するために発行されます

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

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

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

例

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

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

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

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

例

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