Hotkeys Panel

visible
filterable
filterPlaceholder

A navigation panel for hotkeys documentation. The panel displays a set of hotkeys for your application with a description of their purpose.

import {HotkeysPanel} from '@gravity-ui/navigation';

PropTypes

PropertyTypeRequiredDefaultDescription
hotkeysArrayyesList of hotkey groups
titleArrayThe panel title
visibleBooleanyesWhether drawer visible or not
onCloseFunctionClose drawer handler
filterableBooleantrueWhether show search input or not
filterPlaceholderStringSearch input placeholder
filterClassNameStringSearch input class name
leftOffsetNumber/String0Drawer left offset
topOffsetNumber/String0Drawer top offset
emptyStateReactNodeNo search results placeholder
classNameStringDrawer class name
drawerItemClassNameStringDrawer item class name
titleClassNameStringTitle class name
itemContentClassNameStringList item content class name
listClassNameStringList class name

And all the List PropTypes, but not items and filter props (you can find them here)

CSS API

NameDescriptionDefault
--hotkeys-panel-widthThe width of the panel400px
--hotkeys-panel-vertical-paddingThe panel top and bottom paddings18px
--hotkeys-panel-horizontal-paddingThe panel left and right paddings24px

Usage

See storybook example src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.