Модуль «звездный рейтинг» позволяет выводить и получать оценку в виде строки изображений.
Подключение
[HTML] в нужном месте вызвать сниппет rating. Или вручную создать структуру с соответствующими дата-атрибутами.
[JS] в файле js/app.JS прокомментировать строку flsForms.form Rating();
[SCSS] раскомментировать строку @import “rating”; в файле src/scss/base/forms/forms.scss это подключит базовые стили, их можно отредактировать под свои нужды.
<div class="rating rating_set">
<div class="rating__body">
<div class="rating__active"></div>
<div class="rating__items">
<input type="radio" class="rating__item" value="1" name="rating">
<input type="radio" class="rating__item" value="2" name="rating">
<input type="radio" class="rating__item" value="3" name="rating">
<input type="radio" class="rating__item" value="4" name="rating">
<input type="radio" class="rating__item" value="5" name="rating">
</div>
</div>
<div class="rating__value">3.6</div>
</div>
Использование функционала
- По умолчанию значение дата атрибута data-rating указано set, что включает возможность получать оценку от пользователя. Если оставить атрибут пустым, модуль будет только выводить оценку.
- Оценку, которую будет отображать модуль, можно указать в трибуте data-rating-value
- Размер рейтинга, количество «звездочек» , можно изменять с помощью атрибута data-rating-size
- Если добавить атрибут data-rating-title, то цифровая оценка будет выводиться в атрибут title рейтинга