Tree

Отображает элементы в виде древовидной структуры

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

• сворачивать и разворачивать узлы дерева;
• изменять значки в узлах дерева;
• обрезать текст по ширине контейнера, в который помещен компонент.

<Tree
  Value={
    [{id: 1, text: 'группа1', children: []},
    {id: 2, text: 'группа2', children: [
      {id: 3, text: 'элемент1'},
    ]},
  ]}
  OpenedItems-var="openedItems"
  CurrentItem-var="currentItem"
/>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
CSS	Массив строк-классов CSS-стилей компонента	array
ChevronClosedIcon	Значок группы элементов в свернутом состоянии	string
ChevronOpenedIcon	Значок группы элементов в развернутом состоянии	string
ChildrenField	Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое является массивом и описывает дочерние элементы узла дерева	string	children
CurrentItem	Псевдоним свойств InputCurrentItem и OutputCurrentItem	any
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
InputCurrentItem	Входной параметр компонента: идентификатор текущего выбранного узла дерева	any
InputOpenedItems	Входной параметр компонента: массив идентификаторов раскрытых узлов	array
ItemAlias	Идентификатор повторяющегося набора данных	string	item
ItemIndexVariable	Имя переменной для доступа к набору данных текущей итерации	string	i
KeyField	Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое определяет идентификатор узла в дереве	string	id
LocalizationDictionary	Имя словаря для локализации любых надписей, используемых в дереве	string
OnClick	Обработчик события Click	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
OpenedItems	Псевдоним свойств InputOpenedItems и OutputOpenedItems	array
OutputCurrentItem	Выходной параметр компонента: идентификатор текущего выбранного узла дерева	any
OutputOpenedItems	Выходной параметр компонента: массив идентификаторов раскрытых узлов	array
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Value	Массив структур, описывающий структуру дерева, текст и значки в узлах дерева	array
ValueField	Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое определяет текст в узле дерева	string	text
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Данные:

"DATA": [
  { "key": "1", "name": "Санкт-Петербург", "children": [], "icon": "bullet" },
  {
    "key": "2",
    "name": "Москва",
    "icon": "delete_item",
    "children": [
      {
        "key": "54",
        "name": "Ялта",
        "icon": "bullet",
        "children": [
          {
            "key": "55",
            "name": "Мыс Фиолент",
            "icon": "delete_item"
          }
        ]
      }
    ]
  }
]

JSX:

<Tree
  Value-var="DATA"
  KeyField="key"
  ValueField="name"
  ItemAlias="row"
  OpenedItems-var="openedItems"
  CurrentItem-var="currentItem"
  ChevronClosedIcon="folder"
  ChevronOpenedIcon="folderOpen"
  LocalizationDictionary="FrontendProject"
>
  <Group>
    <Group Visible-var="row.children" VerticalAlign="Center">
      <Icon Size="Small" Name-var="row.icon" CSS={['px-4']} />
      <Text Mode="Medium_16" Value-var="row.name"/>
    </Group>
    <Group Hidden-var="row.children" VerticalAlign="Center">
      <Icon Size="Small" Name="row.icon" CSS={['px-4']} />
      <Text Value-var="row.name"/>
    </Group>
  </Group>
</Tree>