Модуль «Слайдер»
Преднастроенный Angular модуль «Слайдер» является интерактивным элементом страницы и используется для выбора значения в заданном диапазоне. Установка числовых значений в поле осуществляется при изменении положения ползунка на шкале соответствующего слайдера (Рисунок 1).
Рисунок 1 — Модуль «Слайдер» на странице записи
Настройка параметров модуля
Для настройки слайдера заполните поля, которые отображаются во всплывающем окне при добавлении модуля на страницу.
Рисунок 2 — Параметры настройки модуля «Слайдер»
Параметр «Наименование экземпляра»
В поле «Наименование экземпляра» укажите название экземпляра модуля. Поле обязательно для заполнения. Значение генерируется автоматически, измените его при необходимости.
На странице раздела можно отобразить несколько слайдеров, но для разных полей. При добавлении более одного слайдера на страницу указывайте отличные друг от друга названия экземпляров слайдера.
Параметры «Максимальное значение» и «Минимальное значение»
В полях «Максимальное значение» и «Минимальное значение» укажите диапазон возможных для выбора значений, установив максимальное и минимальное значения, соответственно. По умолчанию в поле «Максимальное значение» установлено значение «100», в поле «Минимальное значение» — «0». Поля обязательны для заполнения.
Для корректного отображения и работы слайдера укажите значения параметров, которые соответствуют следующим условиям:
- Значения параметров — только числовые значения;
- Точность значений параметров «Минимальное значение» и «Максимальное значение» аналогична точности числового поля источника данных. Например, если в поле источника данных содержатся целые числа, то значения параметров должны быть целочисленными;
- Значение поля «Минимальное значение» меньше значения «Максимальное значение».
Параметр «Шаг»
В поле «Шаг» укажите значение шага, с которым перемещается ползунок по шкале. Поле обязательно для заполнения. Значение по умолчанию «1».
Шаг перемещения определяет возможные значения, устанавливаемые в поле источника данных. Например, если задать шаг «5» и диапазон от «0» до «15», то на шкале возможно выбрать только значения «5», «10» и «15». Установить такие значения, как «3», «7» или «13» с помощью слайдера будет невозможно (Рисунок 3).
Примечание. Если поле источника данных отображается на странице раздела, то в нем возможно установить любое значение согласно его точности, независимо от заданного шага слайдера.
Рисунок 3 — Перемещение ползунка с шагом, равным 5
Для корректного отображения и работы слайдера укажите значение параметра, которое соответствуют следующим условиям:
- Значение параметра — только числовое значение больше 0;
- Точность значения параметра «Шаг» аналогична точности числового поля источника данных;
- Значение поля «Шаг» меньше или равно разнице значений параметров «Максимальное значение» и «Минимальное значение»;
- Поле, выбранное в качестве источника данных, содержит только числовые значения.
Параметр «Деление шкалы»
В поле «Деление шкалы» укажите шаг, с которым на шкале отображаются деления в виде жирных точек для визуального разграничения длины. Возможные значения параметра:
- Целочисленное или дробное число, например, «5» или «0,5». Для ввода дробного числа используйте точку или запятую. Деления на шкале при указании такого значения располагаются равномерно по длине шкалы с шагом, равным 5 или 0,5, соответственно (Рисунок 4);
Рисунок 4 — Деления шкалы с равным шагом
- Целочисленное или дробное число, после которого следует точка с запятой или точка с запятой и тире, например, «5;» или «5;-». Для ввода дробного числа используйте только точку. При указании значения в таком формате на шкале отображается только одно деление с шагом, равным 5 (Рисунок 5);
Рисунок 5 — Одно деление шкалы с заданным шагом
- Целочисленные или дробные числа, разделенные точкой с запятой, например, «3;7;12;20» или «0.3;0.7;1.8;3.4». Для ввода дробного числа используйте только точку. При указании значения в таком формате деления на шкале отображаются на значениях, равных 3, 7, 12 и 20, соответственно (Рисунок 6).
Рисунок 6 — Деления шкалы с разным шагом
Точность значения параметра «Деление шкалы» должна быть аналогична точности числового поля источника данных.
Для отображения делений на шкале значение параметра «Деление шкалы» должно входить в диапазон значений, заданный параметрами «Минимальное значение» и «Максимальное значение».
Примечание. Деления шкалы указывайте соизмерено заданному диапазону. Если для большого диапазона чисел задать маленький шаг, то деления будут отображаться слишком близко друг к другу.
Параметр «Заголовок»
В поле «Заголовок» укажите название слайдера, которое отображается на странице раздела. Для отображения слайдера без названия оставьте поле пустым.
Рисунок 7 — Пример отображения слайдера с названием
Параметр «Поле источник данных»
Для параметра «Поле источник данных» укажите поле, значение которого используется для работы слайдера и автоматически обновляется при изменении положения ползунка. Поле обязательно для заполнения.
Вы можете скрыть поле источника данных на странице записи, при этом установленное значение с помощью слайдера будет храниться в указанном поле.
Для корректного отображения и работы слайдера задайте значение параметра, которое соответствуют следующим условиям:
- Значение параметра совпадает с кодом колонки, в котором содержится числовое значение;
- На одной странице раздела поле является источником данных только для одного экземпляра модуля;
- Точность значений числового поля источника данных аналогична точности значений слайдера. Например, для указания дробных чисел с точностью 0,01 на шкале слайдера укажите в качестве источника данных поле с точностью «Дробное число (0,01)»;
- Поле, являющееся источником данных, доступно для редактирования: поле без признака «Только чтение» или иного запрета на редактирование. В противном случае, в заблокированном поле с помощью слайдера возможно установить значение.
Параметр «Цвет»
По умолчанию цвет слайдера оранжевый. Для изменения цвета слайдера используйте параметр «Цвет». Для этого:
- В параметрах слайдера нажмите на цветовой блок.
- В открывшемся окне выберите нужный цвет одним из следующих способов:
- Выберите маркером в цветовом окне;
- Введите HEX-код в поле «HEX»;
- Введите значения в поля цветовой модели — RGB;
- Выберите из списка недавно используемых цветов.
Если в поле «HEX» будет введен трехзначный, например, #00f или другой код, то BPMSoft подберет наиболее похожий цвет.
Примечание. При удалении HEX-кода цвет, который был ранее выбран через цветовое окно, применится к слайдеру.
Рисунок 8 — Пример настройки цвета слайдера
