Dropdown

Набор компонентов для создания выпадающих списков. Обладают возможностью управления с клавиатуры (только 1‑й уровень).

Storybook

Использование​

Перед использованием выпадающих списков необходимо создать массив с элементами items: DropdownItemType[]. Каждый элемент в списке компонента Dropdown может иметь надпись, иконку и цвет. Значение поля value должно быть уникальным:

const items = [
    {
        /**
         * @type string|number
         */
        value: 0,
        /**
         * @type string
         */
        label: 'Надпись',
        /**
         * @type ReactNode
         */
        contentLeft: <IconHeart color="inherit" />,
        /**
         * @type string
         */
        color: accent,
        /**
         * @type boolean
         */
        isDisabled: false
    },
];

Вызов по клику​

Live Editor
Result
Open in CodeSandbox

Для обработки выбора элемента используйте callback - onItemSelect.

Вызов по наведению​

Live Editor
Result
Open in CodeSandbox

Управление высотой выпадающего меню​

Что бы задать высоту и scroll для выпадающего меню можно использовать props для компонента Dropdown:

  • listOverflow
  • listHeight

Эти props необязательные, если их не указать будет использовано значение - initial

Пример​

Live Editor
Result
Open in CodeSandbox

Пользовательская сборка​

Выпадающие списки допустимо собирать вручную с помощью составных компонентов. Для это этого используйте следующие компоненты:

Пример​

Live Editor
Result
Open in CodeSandbox

Позиционирование​

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

Если необходимо автоматически использовать лишь определенные расположения, то нужно передать массив расположений. Например:

Live Editor
Result
Open in CodeSandbox

Доступность​

Для обеспечения доступности модуль Dropdown предлагает компонент высшего порядка withAssistiveDropdown, в который можно обернуть компонент-вызыватель, например, кнопку.

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

Live Editor
Result
Open in CodeSandbox
caution

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

Ref для DropdownItem​

Достаточно указать свойство ref на компоненте.

Live Editor
Result
Open in CodeSandbox