Поля ввода

Компоненты ввода и вывода в полях виджета.

Библиотека компонентов

http://n2oapp.net/framework/config/schema/control-2.0

Базовые свойства

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор поля
help	Строка	Подсказка по полю
label	Строка	Заголовок поля	Из наименования соответствующего поля выборки виджета
label-class	Строка	Класс для заголовка поля
no-label	true false	Не отображать заголовок	false
no-label-block	true false	Не отображать блок с заголовком	false
src	React компонент	Реализация компонента
class	Строка	CSS класс стилей
style	CSS свойство	Стиль поля
required	true false	Обязательность поля. Поддерживаются плейсхолдеры условия.	false
visible	true false	Видимость поля. Поддерживаются плейсхолдеры условия.	true
readonly	true false	Преобразование компонента только для чтения	false
enabled	true false	Доступность поля. Поддерживаются плейсхолдеры условия.	true
description	Строка	Описание поля
copied	true false	Копируется ли это поле при upload="copy"	false
depends-on	Строка	Зависимость от полей
param	Строка	Параметр в URL для значение по умолчанию
ref-model	Тип действия Redux	Ссылка на модель, в которой будет инициализация значения	resolve
ref-page	this parent	Ссылка на страницу, в которой будет инициализация значения	this
ref-widget-id	Строка	Ссылка на виджет, в котором будет инициализация значения	Для ref-page=this текущий виджет, для ref-page=parent виджет из под которого открыта текущая страница
ref-field-id	Строка	Ссылка на поле, для инициализация значения

<dependencies>

Зависимости компонента

Пример

<input-text id="name">  <dependencies>    ...  </dependencies></input-text>

<enabling>

Условие доступности

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие доступности	Вычисляется по условию

Тело

Java Script выражение

Пример

<dependencies>  <enabling on="type">type.id == 1</enabling>  <!-- Поле доступно, если type.id равен 1 --></dependencies>

<visibility>

Условие видимости

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие видимости	Вычисляется по условию
reset	true false	Сбросить значение при скрытии	false

Тело

Java Script выражение

Пример

<dependencies>  <visibility on="type" reset="true">type.id == 1</visibility>  <!-- Поле видимо, если type.id равен 1 --></dependencies>

<reset>

Сброс значения

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие сброса	Вычисляется по условию

Тело

Java Script выражение

Пример

<dependencies>  <reset on="type">type.id == 1</reset>  <!-- Сбросить значение, если type.id равен 1 --></dependencies>

<fetch-value>

Обновление модели поля ввода

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие видимости	Вычисляется по условию
query-id	Строка	Запрос за данными
value-field-id	Строка	Поле выборки, значение которого будет проставлено в модель поля ввода	name
size	Число	Количество возвращаемых записей

Тело

Список префильтров

Пример

<dependencies>  <fetch-value on="type" query-id="queryId" value-field-id="name" size="10">      <pre-filters>          ...      </pre-filters>  </fetch-value>  <!-- При изменении поля type будет выполнен запрос за данными и значение name будет проставлено в текущее поле --></dependencies>

<fetch>

Обновление модели компонента при изменении зависимых полей. Нужен для списковых компонентов с открытым списком (radio-group, checkbox-group), у которых есть фильтры от других полей

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит установка значений	Вычисляется по условию
apply-on-init	true false	Срабатывает ли при инициализации виджета?	true

Пример

<dependencies>  <fetch on="type"/>  <!-- При изменении поля type будет выполнен запрос за данными и списковый компонент отобразит обновленные варианты --></dependencies>

<set-value>

Условие установки значений

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит установка значений	Вычисляется по условию
apply-on-init	true false	Срабатывает ли при инициализации виджета?	true

Тело

Java Script тело функции

Пример

<dependencies>  <set-value on="type">    if (type.id == 1)      return "Test";  </set-value>  <!-- Поле заполнится значением "Test", если type.id равен 1 --></dependencies>

<mandatory>

Условие обязательности заполнения

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие обязательности заполнения	Вычисляется по условию

Тело

Java Script выражение

Пример

<dependencies>  <requiring on="type">type.id == 1</requiring>  <!-- Поле обязательно для заполнения, если type.id равен 1 --></dependencies>

<validations>

Валидации компонента

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
white-list	Список идентификаторов через запятую	Валидации объекта, сообщения которых будут показаны под этим полем

Пример

<validations white-list="checkUniqueName, checkAdult">    ...</validations>

Тело

Список валидаций

<submit>

действие обновления компонента

<toolbar>

Панель действий компонента

Тело

Кнопки

Пример

<input-text>  <toolbar>    ...  </toolbar></input-text>

Базовые свойства простых компонентов

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
default-value	Строка	Значение по умолчанию простого компонента

Базовые свойства списковых компонентов

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
query-id	Идентификатор выборки	Выборка, возвращающая список вариантов для выбора. Если не задана, необходимо задать <options>.
label-field-id	Поле выборки	Поле выборки, отвечающее за отображение варианта выбора
search-filter-id	Поле выборки	Поле выборки, отвечающее за поиск вариантов выбора	label-field-id
sort-field-id	Поле сортировки	Поле выборки, отвечающее за сортировку вариантов выбора	label-field-id
group-field-id	Поле выборки	Поле выборки, отвечающее за группировку вариантов выбора
image-field-id	Поле выборки	Поле выборки, отвечающее за картинку вариантов выбора
badge-field-id	Поле выборки	Поле выборки, отвечающее за значение в ячейке с текстом
badge-color-field-id	Поле выборки	Поле выборки, отвечающее за цвет ячейки с текстом
icon-field-id	Поле выборки	Поле выборки, отвечающее за иконку вариантов выбора
status-field-id	Поле выборки	Поле выборки, отвечающее за статус в списковых компонентах
enabled-field-id	Строка	Идентификатор поля, которое определяет (true/false) доступен элемент для выбора или нет
cache	true false	Кэшировать результаты выборки	false
size	Число	Количество вариантов выбора на одной странице	30
search	true false	Возможность поиска по значению	true, если есть query-id
begin-param	Строка	Параметр в URL для значения по умолчанию начала интервала
end-param	Строка	Параметр в URL для значения по умолчанию конца интервала

<default-value>

Значение по умолчанию спискового компонента

Атрибуты

Свойства модели спискового компонента

Пример

<select id="gender">  <default-value id="1" name="Мужской"/></select>

<options>

Список вариантов для выбора

Пример

<select id="gender">  <options>    ...  </options></select>

<option>

Вариант выбора

Атрибуты

Свойства модели спискового компонента

Пример

<options>  <option id="1" name="Мужской"/>  <option id="2" name="Женский"/></options>

<pre-filters>

Предустановленные фильтры выборки спискового компонента

Тело

Предустановленные фильтры

Пример

<select query-id="contacts">  <pre-filters>    <eq field-id="type" value="{type.id}"/>  </pre-filters></select>

Базовые свойства интервальных компонентов

<default-value>

Значение по умолчанию интервального компонента

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
begin	Строка	Значение начала интервала
end	Строка	Значение окончания интервала
utc	true false	Всемирное координированное время	false

Пример

<date-interval>  <default-value begin="01.01.2019" end="31.12.2019"/></date-interval>

<input-text>

Компонент ввода однострочного текста или чисел

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
domain	string, integer, numeric, byte, short	Тип данных
precision	Число	Максимальная длина дробной части (используется только для domain="numeric")	8
length	Число	Максимальное количество символов в тексте (используется только для domain="string")
max	Число	Максимальное допустимое число (используется только для числовых domain)
min	Число	Минимальное допустимое число (используется только для числовых domain)
step	Строка	Шаг инкремента / декремента чисел (используется только для числовых domain). Если step="0", то кнопки "вверх вниз" будут отсутствовать	Для domain целых чисел step="1", для domain numeric step="0.01"
measure	Строка	Единица измерения

Пример

<input-text id="name" length="10" domain="string"/>

<auto-complete>

Компонент ввода текста с автоподбором

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
placeholder	Строка	Подсказка для ввода
query-id	Строка	Идентификатор запроса за данными для автоподбора
value-field-id	Строка	Идентификатор поля выборки, отображаемого в автоподборе	name
search-filter-id	Строка	Идентификатор фильтра, используемого для поиска	name
tags	true false	Отображение выбранных элементов тегами	false
max-tag-text-length	Число	Максимальная длина текста элемента	10

Тело

Предустановленные фильтры

Пример

<auto-complete query-id="labels" value-field-id="surname"     search-filter-id="surnameLike" tags="true"/>

<input-money>

Компонент ввода денежных единиц

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
suffix	Строка	Суффикс
prefix	Строка	Префикс
thousands-separator	Строка	Знак, отделяющий группу из трех разрядов
decimal-separator	Строка	Знак, отделяющий дробную часть
integer-limit	Число	Ограничение по количеству знаков целой части
fraction-formatting	off, manual, auto	Форматирование дробной части	off

Пример

<input-money id="money" prefix="$" thousands-separator=" "    decimal-separator="," integer-limit="100" fraction-formatting="manual"></input-money>

<password>

Компонент ввода пароля

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
eye	true false	Отображать кнопку "Показать пароль" или нет	true

Пример

<password id="password" eye="true"/>

<output-text>

Компонент вывода однострочного текста

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
icon	Строка	Иконка
type	icon iconAndText	Иконка с текстом или без
format	Строка	Формат выводимого текста
position	left right	Расположение иконки относительно текста

Пример

<output-text id="text" icon="fa fa-plus" position="left"             type="iconAndText" format="number 0,0.00"/>

<output-list>

Компонент вывода многострочного текста. В случае, если в данных приходит ссылка, текст будет отображаться как ссылка.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
label-field-id	Строка	Поле выборки, содержащее значение элемента	name
href-field-id	Строка	Поле выборки, содержащее ссылку элемента	href
target	newWindow self application	Способ открытия ссылок	newWindow
separator	Строка	Разделитель между элементами	пробел
direction	row column	Направление отображения элементов (в строку или в столбец).	column

Пример

<output-list id="list" label-field-id="label" href-field-id="link"             target="application" direction="row" separator=","/>

<image>

Компонент вывода изображения

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
url	Строка	URL адрес изображения
data	Строка	Изображение в байтах
title	Строка	Заголовок
description	Строка	Подзаголовок
shape	rounded, circle, square	Тип формы изображения	rounded
text-position	top, left, right, bottom	Расположение текста относительно картинки	right
width	px	Ширина картинки

Пример

<image url="/myimage.png" title="Заголовок" description="Подзаголовок">    <statuses>        <status/>        ...        <status/>    </statuses></image>

<statuses>

Список статусов.

<status>

Элемент статуса.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
Src	React компонент	Реализация статуса	Status
field-id	Строка	Поле с данными для статуса
icon	Строка	Иконка статуса
place	topLeft, topRight, bottomLeft, bottomRight	Расположение статуса	topLeft

Пример

<statusfield-id="status"icon="{icon}"place="topLeft"/>

<masked-input>

Компонент ввода текста с маской

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
mask	Строка	Маска текста
measure	Строка	Единица измерения
clear-on-blur	true false	Стирать ли значение при смене фокуса	true

Пример

<masked-input id="phone" mask="+7 (999) 999-99-99"/>

<number-picker>

Компонент выбора числа из диапазона

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
min	Число	Минимальное значение	0
max	Число	Максимальное значение	100
step	Число	Шаг изменения значения	1

Пример

<number-picker id="count" min="2" max="10"/>

<checkbox>

Компонент ввода флажок

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
unchecked	null или false	Значение, которое будет отправляться, если чекбокс не отмечен.	null

Пример

<checkbox id="vip" unchecked="false"/>

<date-time>

Компонент ввода даты и времени

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
date-format	DD.MM.YYYY DD/MM/YYYY	Формат отображения даты	DD.MM.YYYY
time-format	HH:mm HH:mm:ss	Формат отображения времени
min	Строка	Минимальная дата возможная для выбора
max	Строка	Максимальная дата возможная для выбора
utc	true false	Всемирное координированное время	false

Пример

<date-time id="date" date-format="DD.MM.YYYY" min="2018-01-01T08:00:00Z" utc="true"/>

<time-picker>

Компонент ввода времени

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
prefix	Строка	Префикс
mode	"hours,minutes,seconds"; "hours,minutes"; "hours"; "minutes"	Режим отображения списка выбора	hours,minutes,seconds
time-format	Строка	Формат времени	HH:mm:ss
format	digit symbols	Формат отображения времени, digit ("00:00:00") или symbols ("15 мин")	symbols
default-value	Время	Значение по умолчанию

Пример

<time-picker id="test1" prefix="from: " format="digit" mode="hours,minutes" time-format="hh:mm"/>

<file-upload>

Компонент загрузки файлов

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
multi	true false	Поддержка загрузки нескольких файлов	false
ajax	true false	Поддержка загрузки через ajax запрос	true
upload-url	Строка	URL загрузки файла
delete-url	Строка	URL удаления файла
value-field-id	Ссылка на поле	Поле выборки, содержащее идентификатор файла
label-field-id	Ссылка на поле	Поле выборки, содержащее наименование файла
message-field-id	Ссылка на поле	Поле выборки, содержащее сообщение файла
url-field-id	Ссылка на поле	Поле выборки, содержащее URL скачивания файла
request-param	Строка	Наименование поля в запросе miltipart form data
show-size	true false	Отображение размера файла	true
accept	Строка	Доступные расширения файлов (через запятую)

Пример

<file-upload id="file" label="Загрузить файл"             class="custom-class" multi="true"             ajax="true" upload-url="/n2o/data"             delete-url="/files/delete/{file.id}"             value-field-id="hash"             label-field-id="filename"             url-field-id="url" show-size="true"             accept=".img,.png"/>

<image-upload>

Компонент загрузки изображений

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
multi	true false	Поддержка загрузки нескольких файлов	false
ajax	true false	Поддержка загрузки через ajax запрос	true
upload-url	Строка	URL загрузки файла
delete-url	Строка	URL удаления файла
value-field-id	Ссылка на поле	Поле выборки, содержащее идентификатор файла
label-field-id	Ссылка на поле	Поле выборки, содержащее наименование файла
message-field-id	Ссылка на поле	Поле выборки, содержащее сообщение файла
url-field-id	Ссылка на поле	Поле выборки, содержащее URL скачивания файла
request-param	Строка	Наименование поля в запросе miltipart form data
show-size	true false	Отображение размера файла	true
show-name	true false	Отображение имени файла	false
accept	Строка	Доступные расширения файлов (через запятую)
list-type	image card	Тип отображения при мультивыборе (image - в строку только изображения с возможностью просмотра (опционально) и удаления, card - вид горизонтальной карточки с показом названия, размера и кнопками удаления и просмотра (опционально))	image
can-lightbox	true false	Возможность просмотра изображения в большом окне	false
can-delete	true false	Возможность удаления изображения	true
icon	CSS класс	Иконка по умолчанию в области загрузки
width	Число	Ширина области загрузки
height	Число	Высота области загрузки
icon-size	Число	Размеры иконки	Размер области загрузки
show-tooltip	true false	Наличие тултипа	true
shape	rounded, circle, square	Тип формы изображения	rounded

Пример

<image-upload id="icon" label="Загрузить изображение"             list-type="card" can-lightbox="true"             can-delete="false" width="500"             multi="true"             ajax="true" upload-url="/n2o/data"             delete-url="/files/delete/{file.id}"             value-field-id="hash"             label-field-id="filename"             url-field-id="url" show-size="true"             accept=".img,.png"/>

<select>

Компонент выбора из выпадающего списка

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
type	single checkboxes	Тип выбора в выпадающем списке
cleanable	true false	Опция очистки компонента	true
select-format	Строка	Универсальный заголовок поля. Все варианты select-format будут работать только когда тип checkboxes. Нужно использовать либо универсальный заголовок, либо 3 вида заголовков при разном числе элементов. Если не задать ни один, то число выбранных элементов не будет отображаться
select-format-one	Строка	Заголовок поля при одном элементе
select-format-few	Строка	Заголовок поля при нескольких элементах
select-format-many	Строка	Заголовок поля при большом числе элементов
description-field-id	Строка	Идентификатор поля для отображения дополнительной информации в опциях выпадающего списка

Пример

<select id="gender" label="Пол" query-id="genders" cleanable="false" />

<input-select>

Компонент ввода текста с выбором из выпадающего списка

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
type	single, multi, checkboxes	Тип выбора в выпадающем списке	single
reset-on-blur	true,false	Стирание значения при потере фокуса	true
description-field-id	Строка	Идентификатор поля для отображения дополнительной информации в опциях выпадающего списка
max-tag-text-length	Число	Максимальная длина текста элемента	10

Пример

<select id="gender" label="Пол" query-id="genders" type="single"/>

<select-tree>

<input-select-tree>

Компонент ввода с выбором в выпадающем списке в виде дерева

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
parent-field-id	Строка	Идентификатор родительского поля
has-children-field-id	Строка	Наличие дочерних элементов.
master-field-id	Строка	Идентификатор master поля
detail-field-id	Строка	Идентификатор detail поля
value-field-id	Строка	Идентификатор узла дерева.
ajax	true false	Поддержка загрузки через ajax запрос	false
checkboxes	true false	Отображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режим	false
checking-strategy	child, parent, all	Стратегия выбора данных из дерева	all
max-tag-count	Число	Максимальное количество элементов в поле
max-tag-text-length	Число	Максимальная длина текста элемента (в режиме чекбоксов)	10

Пример

<input-select-tree id="address" label="Адрес" checkboxes="true" checking-strategy="child"                    parent-field-id="parent_id" label-field-id="name" value-field-id="id"                   query-id="address" has-children-field-id="hasChildren" search-filter-id="name"/>

<radio-group>

Компонент радио кнопок

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
inline	true, false	Отображение элементов на одной строке	false, при type='tabs' inline='true'
type	default, btn, tabs	Тип кнопок	default

Пример

<radio-group id="gender" inline="false" type="default"/>

<checkbox-group>

Компонент группы чекбоксов

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
inline	true, false	Отображение элементов на одной строке	false
type	default, btn		default

Пример

<checkbox-group id="gender" inline="false" type="default"/>

<pills>

Компонент ввода Таблетки

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
type	radio, checkboxes	Тип выбора значений (radio - по одному, checkboxes - по несколько)	checkboxes

Пример

<pills id="choice" type="radio"/>

<list>

<grid>

<tree>

<date-interval>

Компонент ввода интервала дат

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
date-format	DD.MM.YYYY DD/MM/YYYY	Формат отображения даты	DD.MM.YYYY
time-format	HH:mm HH:mm:ss	Формат отображения времени
min	Строка	Минимальная дата возможная для выбора
max	Строка	Максимальная дата возможная для выбора
utc	true false	Всемирное координированное время	false

Пример

<date-interval id="interval" date-format="DD/MM/YYYY"/>

<input-interval>

<interval-field>

Компонент интервала

<begin>

Компонент начала интервала

Тело

Поле ввода

<end>

Компонент конца интервала

Тело

Поле ввода

Пример

<interval-field id="range">    <begin>        <input-text id="start-range" domain="integer" max="5" min="0"/>    </begin>    <end>        <input-text id="end-range" domain="integer" max="5" min="0"/>    </end></interval-field>

<text-area>

Компонент ввода многострочного текста

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
min-rows	Число	Минимальная высота поля в строках текста
max-rows	Число	Максимальная высота поля в строках текста

Пример

<text-area id="comment" max-rows="10" placeholder="Введите свой комментарий"/>

<text-editor>

Компонент редактирования текста

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
toolbar-url	Строка	Путь до файла конфигурации тулбара

Пример

<text-editor id="editor" toolbar-url="META-INF/resources/toolbar.json"/>

<code-editor>

Компонент редактирования кода

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
language	sql xml html javascript groovy java	Язык кода
min-lines	Число	Минимальное число видимых строк	5
max-lines	Число	Максимальное число видимых строк

Пример

<code-editor id="editor" language="java"/>

<text>

Компонент текста

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
format	Строка	Формат текста

Пример

<text>Привет, {username}</text>

Тело

Текст с плейсхолдерами

<html>

Компонент вывода html

Пример

<html id="html" default-value="&lt;h3&gt;Hello, World!&lt;/h3&gt;"/>

Тело

HTML разметка с плейсхолдерами

<code>

Компонент для просмотра программного кода с подсветкой синтаксиса

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
language	sql, xml, javascript, groovy, java	Язык кода
theme	light dark	Цвет фона	light
show-line-numbers	true false	Отображение нумерации строк	true
starting-line-number	Число	Значение, с которого будет производиться нумерация	1
hide-buttons	true false	Скрытие кнопок	false
hide-overflow	true false	Скрытие вертикальной полосы прокрутки	false

Пример

<code show-line-number="true" starting-line-number="1" theme="light" language="java">    if (a == b)        return true;</code>

Тело

Программный код

<rating>

Компонент рейтинг

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
max	integer	Рейтинг по шкале от 1 до max	5
half	true,false	Можно ставить оценку с половиной (например 3.5)	false
show-tooltip	true,false

Пример

 <rating max="5" show-tooltip="false" half="false"/>

<field>

Произвольный React компонент.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	React компонент	Реализация компонента

Пример

<field src="MyControl"       ext:prop1="value1"       ext:prop2="value2"/>

<search-buttons>

На открываемой странице будут добавлены кнопки "Найти" и "Сбросить". Кнопка "Найти" будет выполнять фильтрацию записей согласно указанным условиям. Кнопка "Сбросить" сбрасывает действие всех фильтров.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
clear-ignore	Строка	Поля, игнорируемые при сбросе фильтров

Пример

<search-buttons id="search" clear-ignore="name,surname"/>

<slider>

Компонент ползунок

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
mode	single range	Одиночный ползунок / мульти-режим	single
vertical	true false	Вертикальное расположение элемента	false
measure	Строка	Единица измерения
min	Число	Минимальное значение
max	Число	Максимальное значение
step	Число	Шаг приращения

Пример

<slider id="percent" measure="%" min="0" max="100" step="5"/>

<alert>

Компонент вывода оповещения

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
header	Строка	Текст заголовка
footer	Строка	Текст нижней части
color	Строка	Цвет оповещения
fade	true false	Включение плавного отображения	true
tag	Строка	Тэг

Пример

<alert id="alert" color="danger">    Что-то пошло не так</alert>

Тело

Текст оповещения

<progress>

Компонент отображения прогресса

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
max	Число	Максимальное значение
bar-text	Строка	Описание шкалы прогресса
animated	true false	Включает анимацию. При включении отображает полоски	false
striped	true false	Отображение полосок на шкале прогресса	false
color	Строка	Цвет шкалы прогресса
bar-class	Строка	Класс шкалы прогресса

Пример

<progress id="progress" max="100" color="info"/>

<status>

Компонент отображения статуса

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
color	Строка	Цвет индикатора
text	Строка	Текст статуса
position	left right	Расположение текста	right

Пример

<status id="status" color="success" text="Задача выполнена"/>