Модуль “звездный рейтинг”

Модуль “звездный рейтинг”

Модуль «звездный рейтинг» позволяет выводить и получать оценку в виде строки изображений.

Подключение

[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 рейтинга
Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Что будем искать? Например,Человек

Мы в социальных сетях