Dropdown
Выпадающий многоуровневый список.
Использование
Обязательным параметром является только массив items.
Внутри items может быть такой же вложенный массив items.
Формат следующий:
type Items = Array<{
/**
* Значение у item
*/
value: string | number;
/**
* Метка-подпись к item
*/
label: string;
/**
* Сторона открытия вложенного дропдауна относительно текущего элемента;
*/
placement?: DropdownPlacement;
/**
* Список дочерних items.
*/
items?: Items;
/**
* Item не активен
*/
disabled?: boolean;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
/**
* Отобразить ли разделитель до элемента
*/
dividerBefore?: boolean;
/**
* Отобразить ли разделитель после элемента
*/
dividerAfter?: boolean;
/**
* Выбранный item.
* @deprecated использовать ContentLeft || ContentRight
*/
isActive?: boolean;
/**
* Кастомный цвет текста
* @deprecated
*/
color?: string;
/**
* Item не активен
* @deprecated использовать disabled
*/
isDisabled?: boolean;
}>;
Примеры
- Default
- Size
- Placement
- Trigger
- Portal
Размер Dropdown задается с помощью свойства size.
Возможные значения свойства: "l", "m", "s" или "xs".
Параметр placement может принимать следующие значения : "top", "right", "bottom", "left", "auto".
Default value для placement - "bottom".
Параметр trigger принимает строку: "click" или "hover".
Default value - "click".
Для примера показано значение "hover".
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal, который принимает либо ref либо id html-тега.
Клавиатурная навигация
Данный компонент соответствует требования W3C: Combobox и частично TreeView.
Tab- закрывает Dropdown. Перемещает фокус на следующий элемент на странице;Enter- открывает/закрывает Dropdown. Если на элементе - выбирает его;Space- открывает/закрывает Dropdown. Если на элементе - выбирает его;Home- открывает Dropdown и перемещает фокус на первый элемент;End- открывает Dropdown и перемещает фокус на последний элемент;PageUp- перемещает фокус на 10 элементов выше либо в начало списка;PageDown- перемещает фокус на 10 элементов ниже либо в конце списка;ArrowUp- открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;ArrowDown- открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;ArrowRight- если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;ArrowLeft- закрывает текущий список и перемещает фокус на предыдущий;