DropdownMenu

size
disabled
import {DropdownMenu} from '@gravity-ui/uikit';

Компонент DropdownMenu (выпадающее меню) позволяет организовывать элементы в группы, создавать подменю и настраивать переключатель. Элементы выпадающего меню настраиваются через свойство items. По умолчанию переключатель меню — кнопка с иконкой многоточия (), которую можно переопределить с помощью свойства renderSwitcher.

<DropdownMenu
    items={[
        {
            action: () => console.log('Rename'),
            text: 'Rename',
        },
        {
            action: () => console.log('Delete'),
            text: 'Delete',
            theme: 'danger',
        },
    ]}
/>

Сгруппированные элементы

Элементы компонентаDropdownMenu можно группировать и визуально отделять от остальных с помощью массивов элементов меню, вложенных в массив items.

<DropdownMenu
    items={[
        [
            {
                action: () => console.log('Call'),
                text: 'Call',
            },
            {
                action: () => console.log('Send email'),
                text: 'Send email',
            },
        ],
        {
            action: () => console.log('Rename'),
            text: 'Rename',
        },
        {
            action: () => console.log('Delete'),
            text: 'Delete',
            theme: 'danger',
        },
    ]}
/>

Подменю

Используя свойство items для отдельного элемента меню, можно добавить вложенные подэлементы.

Для элементов меню с подменю предусмотрены следующие дополнительные классы для стилизации:

  • .g-dropdown-menu__menu-item_with-submenu— для элементов меню с более чем одним вложенным подэлементом;
  • .g-dropdown-menu__menu-item_active-parent— для элемента, подменю которого в данный момент открыто.
<DropdownMenu
    items={[
        {
            action: () => console.log('Rename'),
            text: 'Rename',
        },
        {
            action: () => console.log('Delete'),
            text: 'Delete',
            theme: 'danger',
        },
        {
            text: 'More',
            items: [
                {
                    action: () => console.log('Mark as'),
                    text: 'Mark as',
                    items: [
                        {
                            action: () => console.log('Important'),
                            text: 'Important',
                        },
                        {
                            action: () => console.log('Favorite'),
                            text: 'Favorite',
                        },
                    ],
                },
                {
                    action: () => console.log('Copy'),
                    text: 'Copy',
                },
                {
                    text: 'Move to',
                    items: [
                        {
                            action: () => console.log('Location #1'),
                            text: 'Location #1',
                        },
                        {
                            action: () => console.log('Location #2'),
                            text: 'Location #2',
                        },
                    ],
                },
            ],
        },
    ]}
/>

Пользовательский переключатель меню

Для настройки переключателя меню используйте свойство renderSwitcher. Это может быть любая функция, возвращающая React-компонент (или (props: SwitcherProps) => React.ReactNode в контексте TypeScript; см. SwitcherProps ниже). По умолчанию переключатель меню — кнопка с иконкой многоточия ().

John Doe
<DropdownMenu
    renderSwitcher={(props) => (
        <div {...props} style={{cursor: 'pointer', borderBottom: '1px dotted'}}>John Doe</div>
    )}
    items={[
        {
            action: () => console.log('Rename'),
            text: 'Rename',
        },
        {
            action: () => console.log('Delete'),
            text: 'Delete',
            theme: 'danger',
        },
    ]}
/>

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

Пользовательские иконки

Для добавления пользовательских иконок к элементам DropdownMenu используйте свойства iconStart и iconEnd. По умолчанию в элементах DropdownMenu иконки отсутствуют.

Чтобы изменить иконку переключателя меню, используйте свойства renderSwitcher компонентаDropdownMenu По умолчанию переключатель меню — кнопка с иконкой многоточия ().

<DropdownMenu
    renderSwitcher={(props) => (
        <Button {...props} view="flat">
            <Icon size={16} data={Bars} />
        </Button>
    )}
    items={[
        {
            iconStart: <Icon size={16} data={Pencil} />,
            action: () => console.log('Rename'),
            text: 'Rename',
        },
        {
            iconStart: <Icon size={16} data={TrashBin} />,
            action: () => console.log('Delete'),
            text: 'Delete',
            theme: 'danger',
        },
    ]}
/>

Свойства

ИмяОписаниеТипЗначение по умолчанию
itemsМассив элементов. Вложенные массивы элементов представляют визуально разделенные группы.(DropdownMenuItem | DropdownMenuItem[])[] | []
dataДанные, которые передаются в действия, вызываемые из меню (это может быть полезно для контекстных меню).any
iconИконка дефолтного переключателя (switcher).React.ReactNodeИконка многоточия.
sizeПрименяется как к дефолтному switcher, так и к меню.'s' | 'm' | 'l' | 'xl''m'
disabledЗначение true для этого свойства отключает кнопку switcher и блокирует открытие меню.boolean
renderSwitcherФункция рендеринга для контрола переключения меню.React.ReactNode
switcherWrapperClassNameЗначение для свойства className родительского компонента switcher.string
defaultSwitcherPropsСвойства дефолтного switcher.ButtonProps
defaultSwitcherClassNameЗначение для свойства className дефолтного switcher.string
menuPropsПереопределяет свойства выпадающего меню по умолчанию.MenuProps
popupPropsПереопределяет свойства всплывающего окна по умолчанию.PopupProps
openПереключает видимость выпадающего меню.boolean
onOpenToggleВызывается при открытии или закрытии меню.() => void
onSwitcherClickВызывается при клике по переключателю.React.MouseEventHandler<HTMLElement>
hideOnScrollУказывает, нужно ли скрывать меню при прокрутке родительского элемента.booleantrue
childrenПользовательский контент внутри всплывающего окна с меню.React.ReactNode

Используется для описания отдельных элементов выпадающего меню.

ИмяОписаниеТипЗначение по умолчанию
textТекстовое содержимое элемента меню.React.ReactNode
actionОбработчик клика по элементу меню. Получает параметры от родительского выпадающего меню (event и data).(event: React.MouseEvent, data: any) => void
iconStartИконка, отображаемая перед содержимым элемента меню.React.ReactNode
iconEndИконка, отображаемая после содержимого элемента меню. Игнорируется, если у элемента есть подменю.React.ReactNode
hiddenОпределяет, скрыт ли элемент меню.boolean
disabledОпределяет, заблокирован ли элемент меню.boolean
hrefЭлемент меню с этим свойством становится ссылкой на указанное местоположение.string
targetТо же, что и атрибут target у тега <a>.string
relТо же, что и атрибут rel у тега <a>.string
extraPropsДополнительные свойства для элемента меню.object
titleТекст всплывающей подсказки.string
classNameЗначение HTML-атрибута class.string
itemsЭлементы подменю.(DropdownMenuItem | DropdownMenuItem[])[]
popupPropsСвойства всплывающего окна подменю.string
pathПуть индексов от корня до текущего элемента.number[]
closeMenuПользовательская функция для закрытия меню (closeMenu). Ее можно вызвать вместо закрытия основного меню. Позволяет сначала закрыть подменю, а затем основное меню.() => void

SwitcherProps

ИмяОписаниеТип
onClickВызывается при клике по переключателю.() => void
onKeyDownВызывается при получении переключателем фокуса и нажатии клавиши действия.() => void