Рейтинг формы

Пользовательский компонент звездного рейтинга BootstrapVue, <b-form-rating>, предназначен для ввода или отображения значения рейтинга. Компонент полностью доступен по WAI-ARIA и поддерживает управление с клавиатуры.

Доступно в BootstrapVue с v2.12.0

Обзор

Значения рейтинга варьируются от 1 до разрешенного количества звезд (по умолчанию - 5, минимальное количество звезд - 3). Поскольку <b-form-rating> использует класс Bootstrap form-control, его можно легко разместить внутри групп ввода.

Для <b-form-rating> существует два основных режима: интерактивный и только для чтения.

Интерактивный режим позволяет пользователю выбирать рейтинг от 1 до количества звезд (по умолчанию 5) с полным числом приращений.

Интерактивный рейтинг (режим ввода):

<template>
  <div>
    <b-form-rating v-model="value"></b-form-rating>
    <p class="mt-2">Значение: </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">Значение: </p>
  </div>
</template>

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

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

Стилизация

Вариант и цвет

С легкостью примените один из вариантов цвета темы Bootstrap к значку рейтинга с помощью свойства variant. По умолчанию используется цвет текста элемента управления формы по умолчанию.

<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">Значение: </p>
  </div>
</template>

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

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

Чтобы применить собственный цвет, используйте свойство color, которое принимает стандартное имя цвета CSS, значение цвета HEX (#...) или RGB/RGBA (rgb(...)/rgba(...)):

<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">Значение: </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">Рейтинг с 10 звездами:</label>
    <b-form-rating id="rating-10" v-model="value10" stars="10"></b-form-rating>
    <p class="mt-2">Значение: </p>

    <label for="rating-7">Рейтинг с 7 звездами:</label>
    <b-form-rating id="rating-7" v-model="value7" stars="7"></b-form-rating>
    <p class="mt-2">Значение: </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">Значение: </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">Значение: </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">Значение: </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">Маленькие элементы рейтинга</label>
    <b-form-rating id="rating-sm" v-model="value" size="sm"></b-form-rating>

    <label for="rating-md" class="mt-3">Элементы рейтинга по умолчанию (средний)</label>
    <b-form-rating id="rating-md" v-model="value"></b-form-rating>

    <label for="rating-lg" class="mt-3">Большие элементы рейтинга</label>
    <b-form-rating id="rating-lg" v-model="value" size="lg"></b-form-rating>

    <p class="mt-2">Значение: </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">Инлайновый рейтинг:</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">Маленький рейтинг без рамки</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">Рейтинг по умолчанию (средний) без рамки</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">Большой рейтинг без рамки</label>
    <b-form-rating id="rating-lg-no-border" v-model="value" no-border size="lg"></b-form-rating>

    <p class="mt-2">Значение: </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">Рейтинг отключен</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">Рейтинг только для чтения</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">Значение: </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 Иконки kebab-case и требуют, чтобы соответствующий компонент иконки был зарегистрирован/установлен локально или глобально.

<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">Очистить</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;">
          
        </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">Значение: </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 3.5,
        locale: 'en-US',
        locales: [
          { text: 'English US (en-US)', value: 'en-US' },
          { text: 'Русский (ru-RU)', value: 'ru-RU' },
          { 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-* (отображение), border-* и text-{variant}, а также собственный CSS BootstrapVue для правильного оформления.

Корневым элементом элемента управления является элемент <output>, который позволяет связать с ним элемент <label>.

Доступность

Для пользователей программ чтения с экрана <b-form-rating> отображается как входной ввод типа ползунка.

Клавиатурная навигация используется для выбора значения рейтинга и имитирует элементы управления с клавиатуры для входов range:

Left или Down уменьшит значение рейтинга на 1
Right или Up увеличит значение рейтинга на 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 или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`color`	`String`		Цвет CSS для использования вместо варианта. Принимает строку HEX или RGB/RGBA
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`form`	`String`		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `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` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`inline`	`Boolean`	`false`	Когда `true` отображается как встроенный элемент, а не как элемент blick (100% ширины)
`locale`	`Array` или `String`		Локаль (или локали) для использования при отображении значения, когда задано свойство `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`, а свойство `show-value` равно `true`, включает максимально возможный звездный рейтинг в форматированное значение
`size`	`String`		Устанавливает размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`stars`	`Number` или `String`	`5`	Количество отображаемых звезд. Минимальное значение `3`, по умолчанию `5`
`value` v-model	`Number` или `String`		Значение рейтинга. Это v-model
`variant`	`String`		Применяет к компоненту один из вариантов цвета темы Bootstrap

`v-model`

Свойство	Событие
`value`	`change`

Слоты

Наименование	Область	Описание
`icon-clear`	Нет	Контент для дополнительной кнопки очистки
`icon-empty`		Контент для пустой иконки
`icon-full`		Content for the full icon
`icon-half`		Content for the half icon

События

Событие	Аргументы	Описание
`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)