CheckGroup

Отображает группу флажков или переключателей

Используется для множественного или единичного выбора из массива вариантов.

<CheckGroup Label="CheckGroup"
  Value={[{ title: "Checkbox1", selected: true }, { title: "Checkbox2", selected: false }]}
  OutputValue-var="someVar"
  SelectedField="selected"
  ItemAlias="item"
  >
     <Text Value-var="item.title"/>
</CheckGroup>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
AllowDropClassName	CSS-класс, добавляемый списку элементов при возможности бросить в нем элемент	string
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
ColSpan	Ширина в столбцах для каждой ячейки при использовании свойства Mode со значением td. Индекс элемента в массиве равен индексу ячейки в строке	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
CurrentPage	Номер отображаемого элемента компонента на текущей странице	number	0
DragAcceptValueName	Имя поля данных, по которому происходит проверка в свойстве DragAcceptValues	string
DragAcceptValues	Массив для поиска значения свойства DragAcceptValueName. Используется для вычисления возможности бросания элемента после перетаскивания. Использование этого свойства отключает использование свойства DragGroupName	array
DragClassName	CSS-класс, добавляемый перетаскиваемому элементу	string
DragGroupName	Имя группы, между элементами которой возможно перетаскивание	string	Default
DragHandleSelector	CSS-селектор элемента для перетаскивания	string
DropClassName	CSS-класс, добавляемый перетаскиваемому элементу перед сбросом	string
FullScroll	Признак отрисовки полосы прокрутки с учетом количества повторяющихся элементов компонента	boolean	True
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
ItemAlias	Идентификатор повторяющегося набора данных	string	item
ItemCount	Общее количество элементов компонента; служебное свойство, не требует указания	number	100
ItemIndexVariable	Имя переменной для доступа к набору данных текущей итерации	string	i
ItemsPerPage	Количество отображаемых элементов компонента на странице	number	20
Label	Имя группы	string
Mode	Тип группы	enum	checkbox	radio - Переключатели checkbox - Флажки
NotAllowDropClassName	CSS-класс, добавляемый списку элементов при невозможности бросить в нем элемент	string
OnChange	Обработчик события изменения набора данных	undefined
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
Orientation	Тип ориентации набора данных при перетаскивании мышью	enum	vertical	vertical - Вертикальная horizontal - Горизонтальная
OutputValue	Имя переменной для записи текущей строки повторяющегося набора данных	array
RowSpan	Высота в строках для каждой ячейки при использовании свойства Mode со значением td. Индекс элемента в массиве равен индексу строки	array
SearchFields	Имена полей данных для фильтрации	array
SearchRegexp	Фильтр данных в массиве по совпадению с регулярным выражением	string
SearchText	Фильтр данных в массиве по заданному тексту	string
SelectedField	Имя поля, для которого анализируется состояние флажка Установлен или Снят	string	value
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Unwrap	Признак удаления обертки в компоненте	boolean	False
UseAggregatedInput	Признак отображения флажка родительского варианта для группы вариантов	boolean	True
Value	Массив объектов входных данных	array
Virtualized	Признак отрисовки только видимого содержимого компонента	boolean	False
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Данные:

  "arr": [{ "title": "Максим", "selected": true }, 
  { "title": "Даша", "selected": false }, 
  { "title": "Дима", "selected": true }], 
"arr2": [{ "title": "Максим", "selected": false },
  { "title": "Даша", "selected": false }, 
  { "title": "Дима", "selected": true }], 
"arr3": [{ "title": "Calendar", "selected": false }], 
  "arr4": [{ "title": "Select", "selected": false }]
}

JSX:

<Group Mode="Column">
  <CheckGroup
    Label="CheckGroup"
    Value-var="arr"
    OutputValue-var="arr"
    SelectedField="selected"
    ItemAlias="item"
  >
    <Text Value-var="item.title"/>
  </CheckGroup>
  <CheckGroup
    Label="CheckGroup Radio"
    Mode="radio"
    Value-var="arr2"
    OutputValue-var="arr2"
    SelectedField="selected"
    ItemAlias="item"
  >
    <Text Value-var="item.title"/>
  </CheckGroup>
  <CheckGroup
    Label="CheckGroup Radio"
    Mode="radio"
    Value-var="arr3"
    OutputValue-var="arr3"
    SelectedField="selected"
    ItemAlias="item"
    Orientation="horizontal"
  >
    <Group Mode="Column">
      <Text Value-var="item.title" />
      <Calendar
        Model-var="foo"
        Format="DD.MM.YYYY HH:mm:ss"
        DisplayFormat="DD.MM.YYYY HH:mm:ss"
        UseTimePicker={true}
      />
    </Group>
  </CheckGroup>
  <CheckGroup
    Label="CheckGroup Radio"
    Mode="radio"
    Value-var="arr4"
    OutputValue-var="arr4"
    SelectedField="selected"
    ItemAlias="item"
    Orientation="horizontal"
  >
    <Group Mode="Column">
      <Text Value-var="item.title" />
        <Select
          Label="Множественный выбор"
          Model-var="foo3"
          State={[
            { key: 1, value: 'test1' },
            { key: 2, value: 'test2' },
            { key: 3, value: 'test3' },
            { key: 4, value: 'test4' },
            { key: 5, value: 'test5' }
          ]}
          KeyField="key"
          ValueField="value"
          Multiple={true}
        />
    </Group>
  </CheckGroup>
</Group>