Skip to main content

Ячейки

Содержимое ячейки таблицы или строки списка.

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

http://n2oapp.net/framework/config/schema/n2o-cell-2.0

Общие свойства#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация ячейкиДля каждой ячейки своя реализация по умолчанию. Для custom атрибут обязательный.
classCSS классКласс стиля ячейки
styleCSS свойствоСтиль ячейки
visibletrue falseВидимость ячейки

<text>#

Текст со стилем или без.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
formatСтрокаФормат текста
subtext-field-idСтрокаИдентификатор поля второго уровня текста
subtext-formatСтрокаФормат второго уровня текста

Тело

Переключатель

note

Сам текст берется из значения text-field-id в родительском элементе.

Пример

<text class="font-weight-bold" style="color:red;"/> <!--Жирный шрифт-->

<link>#

Ссылка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
urlСтрокаАдрес URL открываемой страницы
targetself, newWindow, applicationСценарий открытия ссылки
action-idСсылка на действие виджетаДействие виджета, которое будет вызвано при клике по ссылке
iconСтрокаИконка ссылки
typetext, icon, iconAndTextТекст с иконкой или безtext

Тело

Обработчик действия

Пример

<link action-id="update"/>
<link>  <open-page page-id="personCard"/></link>

<icon>#

Иконка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
textСтрокаТекст иконкиБерётся из значения в text-field-id
iconCSS классКласс иконки
typeicon, iconAndTextС текстом или безicon
positionright, leftРасположение текста

Тело

Обработчик действия

Пример

<icon class="fa-pencil" type="iconAndText"/>
<icon class="fa-id-card-o">  <show-modal page-id="personCard"/></icon>

<checkbox>#

Чекбокс.

note

Значение true или false берется из значения text-field-id.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
enabledtrue falseДоступность чекбоксаЕсли есть действие, то true, иначе false
action-idСсылка на действиеДействие, которое выполнится при клике по чекбоксу

Тело

Обработчик действия

Пример

<checkbox action-id="update"/>
<checkbox>  <invoke operation-id="update"/></checkbox>

<progress>#

Индикатор прогресса.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
classCSS classСтиль индикатора
activetrue falseС анимацией загрузки?false
sizelarge, normal, smallРазмер индикатора прогрессаnormal
stripedtrue falseС полосками?false
colorСтрокаЦвет индикатора

Пример

<progress  value="50"  class="bg-success"  size="small"/>

<image>#

Изображение.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
classCSS classСтиль обрамления
widthЧислоШирина изображения (px)
action-idСсылка на действие виджетаДействие виджета, которое выполнится при клике по иконке
shapesquare, circle, roundedФорма картинкиsquare
titleСтрокаЗаголовок
descriptionСтрокаПодзаголовок
text-positiontop, left, right, bottomРасположение текста относительно картинкиright

Тело

Обработчик действия

Пример

<image  width="32"  class="img-thumbnail">    <statuses>       <status/>            ...       <status/>    </statuses>    <action>        <open-page page-id="profile"/>    </action></image>

<statuses>#

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

<status>#

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

Атрибуты

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

Пример

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

<edit>#

Редактирование значения.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
action-idСсылка на действие виджетаДействие виджета, которое выполнится при завершении редактирования
typeinline, popupРасположениеinline
formatСтрокаФормат текста
enabledtrue falseУсловие доступностиtrue

Тело

Поле ввода

Пример

<edit action-id="update" type="popup">  <date-time id="birthday"/></edit>

<toolbar>#

Ячейка с кнопками.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
generateСтрокаГенерация стандартных действий. Возможные значения: update, delete. Можно писать несколько идентификаторов через запятую

Пример

<toolbar>  <button>...</button>  <button>...</button>  <button>...</button></toolbar>

<button>#

Кнопка ячейки.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаПодпись кнопкиВычисляется из action-id
iconCSS классИконка кнопкиВычисляется из action-id
action-idСсылка на действие виджетаДействие виджета, которое выполнится при нажатии на кнопку
classCSS классСтиль кнопки

Тело

Обработчик действия

Пример

<toolbar>  <button action-id="update"/>  <button action-id="delete"/></toolbar>
<toolbar>  <button label="Изменить" icon="fa-pencil">    <open-page page-id="personCard" action-id="update"/>  </button>  <button label="Удалить" icon="fa-trash">    <invoke operation-id="delete"/>  </button></toolbar>

<badge>#

Ячейка с текстом.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
positionright, leftРасположение
textСтрокаТекст вне значка
colorCSS классЦвет значка
formatСтрокаФормат текста в значке
text-formatСтрокаФормат текста вне значка

Тело

Переключатель цвета

Пример

<badge text="{status}" position="right">  <switch>       <case value="1">success</case>       <case value="2">danger</case>       <default>info</default>  </switch></badge>

<list>#

Ячейка со списком.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
sizeЧислоКоличество элементов для группировки
colorCSS классЦвет элементов
label-field-idВложенное поле столбцаОтображаемое поле в объекте, если столбец - массив объектов. Если отсутствует, то столбец является массивом строк.

Тело

Переключатель цвета

Пример

<list color="secondary" size="3"/>

<rating>#

Рейтинг.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
show-tooltiptrue falseПоказать подсказкуfalse
halftrue falseИспользование в качестве значений помимо целых чисел также и половинок целых чисел (0, 0.5, 1, 1.5, ...)false
maxЧислоМаксимальное значение5
readonlytrue falseПредназначен только для чтенияtrue
action-idСсылка на действиеСсылка на обработчик изменения рейтинга

Тело

Обработчик действия

Пример

<rating show-tooltip="true" half="true"/>
<rating readonly="false">  <invoke operation-id="update"/></rating>

<tooltip-list>#

Ячейка с тултипом и раскрывающимся текстовым списком. Раскрывающийся список появляется при количестве элементов больше одного. Иначе ячейка будет пустой или отображать единственное значение.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаУниверсальный заголовок поля. Нужно использовать либо универсальный заголовок, либо 2 вида заголовков (label-few, label-many) при разном числе элементов. Если не задать ни один, то ячейка будет пустой.
label-fewСтрокаЗаголовок поля при нескольких элементах
label-manyСтрокаЗаголовок поля при большом числе элементов
dashed-labeltrue falseПодчеркивание заголовка пунктиромtrue
triggerclick hoverДействие, при котором раскрывается списокhover

Пример

<tooltip-list label="Объектов {size} шт"/><tooltip-list label-few="{size} объекта" label-many="{size} объектов"/>

<switch>#

Переключатель ячеек.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
value-field-idСсылка на значение поляЗначение, в зависимости от которого будет выбираться тип ячейки

Пример

<switch value-field-id="type.id">  <case value="type1">    <badge/>  </case>  <case value="type2">    <icon/>  </case>  <default>    <text/>  </default></switch>

<case>#

Вариант переключения.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
valueСтрокаЗначение, с которым сравнивается value-field-id

Тело

Тип ячейки, который будет выбран, в случае верного условия.

<default>#

Ячейка по умолчанию.

Тело

Тип ячейки, которая будет выбрана, если ни один из вариантов case не был выбран ранее.

<cell>#

Настраиваемая ячейка.

Пример

<cell src="MyCell"  ext:prop1="value1"  ext:prop2="value2"></cell>