Виджет "Ползунок" (с поддержкой тем)
Виджет "Ползунок" отображает элемент ползунка, который позволяет пользователям вводить числовые данные в мэшапе. Можно включить выбор диапазона, чтобы пользователи могли указать минимальное и максимальное значения.
Анатомия виджета
На следующем рисунке показаны различные части виджета "Ползунок".
1. Метка виджета
2. Метка значения
3. Маркер перемещения
4. Дорожка ползуна
5. Метки минимального и максимального значений
 | Виджет "Ползунок" доступен как стандартный виджет в платформе и как веб-компонент, который можно импортировать из SDK. |
Включение режима выбора диапазона
Можно включить свойство виджета RangeSelection, чтобы позволить пользователям выбирать диапазон значений во время выполнения. Если выбор диапазона включен, для указания начала и конца диапазона значений на ползунке используются два маркера перемещения. Эти значения можно задать с помощью свойств Value и EndValue виджета. Чтобы выполнять сервисы на основе изменений значения ползуна, свяжите события ValueChanged и EndValueChanged с другими виджетами, функциями или сервисами данных в мэшапе. Например, можно определить диапазон значений для фильтрации данных для сервиса, который загружает информацию о доступных ресурсах в производственных цехах.
Включение пошагового режима
Можно включить режим пошагового изменения значения на дорожке ползунка, задав для свойства Stepping Mode виджета значение true. Определение шагов приращения на ползунке помогает пользователям понимать масштаб значений дорожки и упрощает помещение маркера на конкретное значение. Задать приращение на ползунке можно одним из следующих способов:
• Чтобы разделить дорожку на шаги, используйте свойство NumberOfSteps.
• Чтобы задать размер шага, используйте свойство StepSize.
Например, чтобы задавать время обновления данных в мэшапе, можно определить для виджета "Ползунок" 5-минутный шаг. Во время выполнения маркер перемещения автоматически фиксируется на шагах, определенных для дорожки ползунка.
Включение вертикального режима
Можно включить вертикальный режим, задав для свойства VerticalSlider виджета значение true.
Включение редактируемого значения
Можно включить режим правки значений, задав для свойства EditableValue виджета значение true. В этой конфигурации пользователи могут ввести значение в метку значения без перемещения маркера. Чтобы изменить значение ползунка, дважды щелкните метку значения и введите значение. Положение маркера изменяется автоматически соответственно новому значению.
Стиль виджета
Все свойства стиля можно править на панели Свойства стиля. Можно настроить цвет, шрифт, форму и размеры для нескольких частей виджета в различных состояниях.
• Категория Slider позволяет изменять цвета фона, объектов переднего плана и панели.
• Категория Thumb позволяет изменять стиль и цвет ползунка или маркера перемещения.
• Категория Min-Max Label позволяет изменять начертание и цвет меток минимума и максимума.
• Категория Track позволяет изменять цвет фона дорожки.
Свойства виджета
Свойства виджета "Ползунок" перечислены в следующей таблице.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) | ||
|---|---|---|---|---|---|---|---|
label | Текст, отображаемый в метке ползунка. | STRING | Н/Д | Д | Д | ||
labelAlignment | Выравнивает метку виджета Слева, Справа или По центру. | STRING | Слева | Д | Н | ||
LabelType | Задает тип метки как Заголовок, Подзаголовок, Метка или Основной текст. | STRING | Метка | Д | Н | ||
Value | Задает или привязывает значение ползунка.
| NUMBER | Н/Д | Д | Н | ||
CustomClass | Определяет CSS для верхнего раздела (div) виджета. При вводе нескольких классов отделяйте каждый класс пробелом. | STRING | Н/Д | Д | Н | ||
TabSequence | Задает последовательность, в которой виджет подсвечивается при нажатии клавиши TAB. | NUMBER | Н/Д | Н | Н | ||
EndValue | Значение ползунка для второго маркера перемещения в режиме выбора диапазона. | NUMBER | Н/Д | Д | Н | ||
EndValueChanged | Инициирует событие при изменении конечного значения ползунка. | Н/Д | Н/Д | Д | Н | ||
Minimum | Задает минимальное значение для ползунка. | NUMBER | 0 | Д | Н | ||
Maximum | Задает максимальное значение для ползунка. | NUMBER | 100 | Д | Н | ||
SteppingMode | Выберите, чтобы переместить ползунок на определенное число шагов для каждого щелчка. | BOOLEAN | false | Н | Н | ||
StepSize | Задает изменение в значении для каждого шага перемещения ползунка.
| NUMBER | Н/Д | Д | Н | ||
NumberOfSteps | Задает число шагов, на которые ползунок перемещается при каждом щелчке.
| NUMBER | Н/Д | Д | Н | ||
ValuePrecision | Задает число разрядов, отображаемых после десятичной точки для значения ползунка. | NUMBER | Н/Д | Н | Н | ||
DisplayValueLabel | Задает опцию отображения для метки значения ползунка: Да, Нет или При перетаскивании. | STRING | Да | Н | Н | ||
EditableValue | Позволяет пользователям перемещать маркер перемещения, изменяя метку значения в мэшапе. | BOOLEAN | false | Н | Н | ||
DisplayMinMaxLabels | Отображает метки минимального и максимального значений. | BOOLEAN | True | Н | Н | ||
HandleSize | Задает размер маркера перемещения в пикселях. | NUMBER | Н/Д | Н | Н | ||
TrackSize | Задает размер полосы в пикселях. | NUMBER | Н/Д | Н | Н | ||
TrackAlignment | Выравнивание трека по позициям: По центру, Начало или Конец ползунка. | STRING | Center | Н | Н | ||
FullTrack | Расширяет трек ползунка, чтобы он полностью содержал значок маркера перемещения. | BOOLEAN | false | Д | Н | ||
MinValueLabel | Указывает метку для минимального значения. | STRING | MIN | Д | Д | ||
MaxValueLabel | Указывает метку для максимального значения. | STRING | MAX | Д | Д | ||
HandleIcon | Управляет формой значка маркера перемещения: Нет, Кружок или Разделить. | STRING | Кружок | Н | Н | ||
SecondHandleIcon | Выбирает медиаобъект для второго значка маркера: Нет, Кружок или Разделить. | STRING | Кружок | Н | Н | ||
MinSideIcon | Выбирает значок для стороны минимума. | MEDIA ENTITY | Н/Д | Н | Н | ||
MinIconSize | Управляет размером значка минимального значения. Опции: Мелкий, Средний, Крупный или Огромный. | STRING | Средний | Д | Н | ||
MaxSideIcon | Выбирает значок для максимальной стороны. | MEDIA ENTITY | Н/Д | Н | Н | ||
MaxIconSize | Управляет размером значка максимального значения. Опции: Мелкий, Средний, Крупный или Огромный. | STRING | Н/Д | Д | Н | ||
RangeSelection | Добавляет второй маркер перемещения и разрешает выбор диапазона на ползунке. | BOOLEAN | false | Н | Н | ||
VerticalSlider | Изменяет ориентацию ползунка на вертикальную. | BOOLEAN | false | Н | Н | ||
ReverseMinMaxValues | Обращает положения минимального и максимального значений. | BOOLEAN | false | Н | Н | ||
ReverseLabelPosition | Обращает положения меток для минимального и максимального значений. | BOOLEAN | false | Н | Н | ||
OverlapHandle | Разрешает перекрытие для двух маркеров перемещения ползунка, когда включен выбор диапазона. | BOOLEAN | false | Н | Н | ||
ValueChanged | Инициирует событие при изменении значения ползунка. | Н/Д | Н/Д | Д | Н | ||
Increment | Доступный для связывания сервис, увеличивающий значение ползунка. | Н/Д | Н/Д | Д | Н | ||
Decrement | Доступный для связывания сервис, уменьшающий значение ползунка. | Н/Д | Н/Д | Д | Н | ||
IncrementSecondHandle | Доступный для связывания сервис, увеличивающий значение второго маркера перемещения, если включен режим выбора диапазона. | Н/Д | Н/Д | Д | Н | ||
DecrementSecondHandle | Доступный для связывания сервис, уменьшающий значение второго маркера перемещения, если включен режим выбора диапазона. | Н/Д | Н/Д | Д | Н | ||
Disabled | Отключает виджет в мэшапе. Виджет остается видимым, но не является интерактивным. | BOOLEAN | false | Д | Н | ||
HandleTooltipField | Отображает текст всплывающей подсказки при наведении указателя на маркер перемещения ползунка. | STRING | Н/Д | Д | Д | ||
HandleTooltipIcon | Задает изображение значка для всплывающей подсказки маркера перемещения ползунка. | MEDIA ENTITY | Н/Д | Н | Н | ||
SecondHandleTooltipField | Отображает текст всплывающей подсказки при наведении указателя на второй маркер перемещения ползунка.
| STRING | Н/Д | Д | Д | ||
SecondHandleTooltipIcon | Задает изображение значка для всплывающей подсказки второго маркера перемещения ползунка.
| MEDIA ENTITY | Н/Д | Н | Н |
Проверка данных виджета ползунка
Можно использовать свойства проверки, чтобы задавать минимальное и максимальное значения при использовании одиночного выбора или выбора диапазона:
Чтобы настроить стандартные сообщения о сбое, используйте свойства MinValueFailureMessgae и MaxValueFailureMessgae.
Дополнительные сведения о общих свойствах проверки см. в разделе Применение проверки к виджетам.
В следующей таблице перечислены свойства проверки, доступные на панели Проверка в ThingWorx 9.3.4 и более поздних версий.
Свойство | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (Д/Н)? | Локализуемое (Д/Н) |
|---|---|---|---|---|---|
CriteriaMessage | Сообщение, отображаемое для критериев проверки и при сбое проверки. | STRING | Н/Д | Д | Д |
CriteriaMessageDetails | Подробности, отображаемые для сообщения о критериях проверки и о сбое. | STRING | Н/Д | Д | Д |
MaxValidValue | Максимальное значение ползунка, для которого пользователь может задать проверку. | STRING | Н/Д | Д | Н |
MaxValueFailureMessage | Сообщение, отображаемое, если значение ползунка выше максимального допустимого значения. | NUMBER | ${value} is the maximum value | Д | Д |
MinValidValue | Минимальное значение ползунка, для которого пользователь может задать проверку. | STRING | Н/Д | Д | Н |
MinValueFailureMessgae | Сообщение, отображаемое, если значение ползунка меньше минимального допустимого значения. | NUMBER | ${value} is the minimum value | Д | Д |
ShowValidationCriteria | Показывает сообщение с подсказкой о требуемых входных данных при правке ползунка. | BOOLEAN | false | Д | Н |
ShowValidationFailure | Показывает сообщение о сбое при сбое проверки введенных данных. | BOOLEAN | false | Д | Н |
ShowValidationSuccess | Показывает сообщение об успешном завершении при успешной проверке введенного значения. | BOOLEAN | false | Д | Н |
SucessMessgae | Сообщение, отображаемое, если значение является допустимым. | STRING | Н/Д | Д | Д |
SuccessMessageDetails | Дополнительное сообщение, расширяющее информацию сообщения об успешной проверке. | STRING | Н/Д | Д | Д |
Validate | Связываемое событие, которое инициируется при изменении значения виджета. Привяжите это событие к сервису или функции, чтобы применить шаблон или выражение проверки. | событие | Н/Д | Д | Н |
ValidationCriteriaIcon | Выбор значка SVG для отображения в сообщении подсказки для критериев проверки. | IMAGELINK | info | Н | Н |
ValidationFailureIcon | Задает отображение значка SVG в сообщении о статусе при сбое проверки. | IMAGELINK | error | Н | Н |
ValidationOutput | Загружает выходные данные проверки виджета. Возвращаемые значения: Undefined, Unvalidated, Valid или Invalid. | STRING | Н/Д | Д | Н |
ValidationState | Связываемое свойство, которое задает состояние проверки. Для этого свойства можно задать значение Undefined , Unvalidated, Valid или Invalid. | STRING | Undefined | Д | Н |
ValidationSuccessIcon | Выбор значка SVG для отображения в сообщении о состоянии при успешном завершении проверки. | IMAGELINK | success | Н | Н |