Skip to main content

Поля ввода

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

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

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

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор поля
helpСтрокаПодсказка по полю
labelСтрокаЗаголовок поляИз наименования соответствующего поля выборки виджета
label-classСтрокаКласс для заголовка поля
no-labeltrue falseНе отображать заголовокfalse
no-label-blocktrue falseНе отображать блок с заголовкомfalse
srcReact компонентРеализация компонента
classСтрокаCSS класс стилей
styleCSS свойствоСтиль поля
requiredtrue falseОбязательность поля. Поддерживаются плейсхолдеры условия.false
visibletrue falseВидимость поля. Поддерживаются плейсхолдеры условия.true
readonlytrue falseПреобразование компонента только для чтенияfalse
enabledtrue falseДоступность поля. Поддерживаются плейсхолдеры условия.true
descriptionСтрокаОписание поля
copiedtrue falseКопируется ли это поле при upload="copy"false
depends-onСтрокаЗависимость от полей
paramСтрокаПараметр в URL для значение по умолчанию
ref-modelТип действия ReduxСсылка на модель, в которой будет инициализация значенияresolve
ref-pagethis 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СтрокаПоля, от которых зависит условие видимостиВычисляется по условию
resettrue 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-inittrue falseСрабатывает ли при инициализации виджета?true

Пример

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

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
onСтрокаПоля, от которых зависит установка значенийВычисляется по условию
apply-on-inittrue 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) доступен элемент для выбора или нет
cachetrue falseКэшировать результаты выборкиfalse
sizeЧислоКоличество вариантов выбора на одной странице30
searchtrue 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СтрокаЗначение окончания интервала
utctrue falseВсемирное координированное времяfalse

Пример

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

<input-text>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
domainstring, 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
tagstrue 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-formattingoff, manual, autoФорматирование дробной частиoff

Пример

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

<password>#

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

Атрибуты

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

Пример

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

<output-text>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
iconСтрокаИконка
typeicon iconAndTextИконка с текстом или без
formatСтрокаФормат выводимого текста
positionleft 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
targetnewWindow self applicationСпособ открытия ссылокnewWindow
separatorСтрокаРазделитель между элементамипробел
directionrow 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СтрокаПодзаголовок
shaperounded, circle, squareТип формы изображенияrounded
text-positiontop, left, right, bottomРасположение текста относительно картинкиright
widthpxШирина картинки

Пример

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

<statuses>#

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

<status>#

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

Атрибуты

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

Пример

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

<masked-input>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
maskСтрокаМаска текста
measureСтрокаЕдиница измерения
clear-on-blurtrue 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>#

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

Атрибуты

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

Пример

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

<date-time>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
date-formatDD.MM.YYYY DD/MM/YYYYФормат отображения датыDD.MM.YYYY
time-formatHH:mm HH:mm:ssФормат отображения времени
minСтрокаМинимальная дата возможная для выбора
maxСтрокаМаксимальная дата возможная для выбора
utctrue 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
formatdigit 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>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
multitrue falseПоддержка загрузки нескольких файловfalse
ajaxtrue 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-sizetrue 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>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
multitrue falseПоддержка загрузки нескольких файловfalse
ajaxtrue 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-sizetrue falseОтображение размера файлаtrue
show-nametrue falseОтображение имени файлаfalse
acceptСтрокаДоступные расширения файлов (через запятую)
list-typeimage cardТип отображения при мультивыборе (image - в строку только изображения с возможностью просмотра (опционально) и удаления, card - вид горизонтальной карточки с показом названия, размера и кнопками удаления и просмотра (опционально))image
can-lightboxtrue falseВозможность просмотра изображения в большом окнеfalse
can-deletetrue falseВозможность удаления изображенияtrue
iconCSS классИконка по умолчанию в области загрузки
widthЧислоШирина области загрузки
heightЧислоВысота области загрузки
icon-sizeЧислоРазмеры иконкиРазмер области загрузки
show-tooltiptrue falseНаличие тултипаtrue
shaperounded, 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>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
typesingle checkboxesТип выбора в выпадающем списке
cleanabletrue 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>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
typesingle, multi, checkboxesТип выбора в выпадающем спискеsingle
reset-on-blurtrue,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СтрокаИдентификатор узла дерева.
ajaxtrue falseПоддержка загрузки через ajax запросfalse
checkboxestrue falseОтображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режимfalse
checking-strategychild, 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>#

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

Атрибуты

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

Пример

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

<checkbox-group>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
inlinetrue, falseОтображение элементов на одной строкеfalse
typedefault, btndefault

Пример

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

<pills>#

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

Атрибуты

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

Пример

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

<list>#

<grid>#

<tree>#

<date-interval>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
date-formatDD.MM.YYYY DD/MM/YYYYФормат отображения датыDD.MM.YYYY
time-formatHH:mm HH:mm:ssФормат отображения времени
minСтрокаМинимальная дата возможная для выбора
maxСтрокаМаксимальная дата возможная для выбора
utctrue 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>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
languagesql 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>#

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

Атрибуты

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

Пример

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

Тело

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

<rating>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
maxintegerРейтинг по шкале от 1 до max5
halftrue,falseМожно ставить оценку с половиной (например 3.5)false
show-tooltiptrue,false

Пример

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

<field>#

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

Атрибуты

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

Пример

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

<search-buttons>#

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

Атрибуты

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

Пример

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

<slider>#

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

Атрибуты

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

Пример

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

<alert>#

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

Атрибуты

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

Пример

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

Тело

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

<progress>#

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

Атрибуты

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

Пример

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

<status>#

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

Атрибуты

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

Пример

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