✅Tree Chevrone

Данный вид дерева используется, когда группирующие страницы имеют свою личную страницу (URL).

Анатомия

1. Элемент структуры (Страница, папка, группа, ссылка и т.д.)

2. Шеврон. Разворачивает или сворачивает элементы структуры

3. Вспомогательная иконка (опционально). Она может помочь пользователю быстро определять различные типы контента.

Описание работы

Разворачивание и сворачивание страниц

Разворачивание и сворачивание страниц происходит по клику на кнопку-иконку шеврон, при этом страница не выбирается:

Выбор страниц

Чтобы выбрать страницу, пользователь может нажать в любом месте элемента, за исключением области кнопки-иконки шеврона:

Для выбора страницы последнего уровня, пользователь может нажать в любом месте контейнера.

Если дочерняя страница, выбранная пользователем, сворачивается, родительская страница должна наследовать выбранное состояние (без маркера), чтобы пользователь не терял контекст того, что выбрано, даже если это скрыто от глаз.

Переполнение содержимого

Если наименование страницы слишком длинное и не помещается в одну строчку, текст уходит в многоточие (…)и при наведении показывается всплывающая подсказка (хинт), чтобы отобразить весь текст.

Вспомогательные иконки

При добавлении иконок к страницам в древовидном представлении важно, чтобы иконка была у каждой страницы. Отсутствие иконки у каждой страницы может привести к несоответствию выравнивания и затруднить восприятие иерархии групп страниц.

Множественный выбор

Для множественного выбора используйте чекбоксы:

Размеры

Внешние размеры

Дерево имеет динамическую высоту и ширину, в зависимости от входящих в неё количества элементов и контейнера, в который оно встроено. Минимальная рекомендуемая ширина - 360 рх.

Внутренние размеры

Высота элемента (страницы) - 32 рх

Состояния

Элементы дерева имеют 5 состояний:

1. Default. Состояние по умолчанию

2. Hover. При наведении

3. Active. Выбранная страница

4. Active (parent). Скрытая дочерняя выбранная страница

5. Disabled. Страница, заблокированная для выбора

Фокус

Так же существует состояние Focus. Он появляется в момент выбора страницы с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.