Tree Line
Данный вид дерева используется, когда группирующие папки НЕ имеют своей личной страницы (URL).
Last updated
Was this helpful?
Данный вид дерева используется, когда группирующие папки НЕ имеют своей личной страницы (URL).
Last updated
Was this helpful?
Элемент структуры (Страница, папка, группа, ссылка и т.д.)
Навигационные связи. Соединительные линии, отображающие связи между элементами дерева (папками и страницами).
Вспомогательная иконка. Визуализация групп страниц/папок.
Разворачивание и сворачивание папки происходит по клику в любом месте элемента, при этом саму папку выбрать нельзя:
Чтобы выбрать страницу, пользователь может нажать в любом месте элемента:
Если дочерняя страница, выбранная пользователем, сворачивается, родительская папка должна наследовать выбранное состояние (без маркера), чтобы пользователь не терял контекст того, что выбрано, даже если это скрыто от глаз.
Если наименование страницы/папки слишком длинное и не помещается в одну строчку, текст уходит в многоточие (…)и при наведении показывается всплывающая подсказка (хинт), чтобы отобразить весь текст.
Важно, чтобы иконка была у каждой страницы/папки. Отсутствие иконки у каждой страницы/папки может привести к несоответствию выравнивания и затруднить восприятие иерархии групп страниц/папок.
Мы рекомендуем использовать одинаковые иконки для всех папок и страниц. Использование иконки папки (folder) для папок и значка документа (file) для страниц — это общепринятое сочетание иконок, используемых в древовидных структурах.
Для множественного выбора используйте чекбоксы:
Дерево имеет динамическую высоту и ширину, в зависимости от входящих в неё количества элементов и контейнера, в который оно встроено. Минимальная рекомендуемая ширина - 360 рх.
Высота элемента (страницы/папки) - 32 рх:
Элементы дерева имеют 5 состояний:
Default. Состояние по умолчанию
Hover. При наведении
Active. Выбранная страница
Active (parent). Скрытая дочерняя выбранная страница
Disabled. Страница/папка, заблокированная для выбора/взаимодействия
Фокус
Так же существует состояние Focus. Он появляется в момент выбора страницы/папки с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
