Navigation
4.0.12
• Hotkeys PanelComponents
UIKit
7.35.1
AccordionActionTooltipActionsPanelAlertArrowToggleAvatarBreadcrumbsButtonCardCheckboxClipboardButtonDefinitionListDialogDisclosureDividerDrawerDropdownMenuFilePreviewHelpMarkHotkeyIconLabelLinkListLoaderMenuModalNumberInputOverlayPaginationPalettePasswordInputPinInputPlaceholderContainerPopoverPopupPortalProgressRadioRadioGroupSegmentedRadioGroupSelectSheetSkeletonSliderSpinStepperSwitchTableTabsTextTextAreaTextInputToasterTocTooltipUserUserLabel
Date Components
3.4.2
Navigation
4.0.12
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
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| hotkeys | Array | yes | List of hotkey groups | |
| title | ReactNode | The panel title | ||
| togglePanelHotkey | String | The panel open hotkey | ||
| open | Boolean | yes | Whether drawer open or not | |
| onClose | Function | Close drawer handler | ||
| filterable | Boolean | true | Whether show search input or not | |
| filterPlaceholder | String | Search input placeholder | ||
| filterClassName | String | Search input class name | ||
| leftOffset | Number/String | Drawer left offset | ||
| topOffset | Number/String | Drawer top offset | ||
| emptyState | ReactNode | No search results placeholder | ||
| className | String | Drawer class name | ||
| drawerItemClassName | String | Drawer item class name | ||
| titleClassName | String | Title class name | ||
| itemContentClassName | String | List item content class name | ||
| listClassName | String | List class name | ||
| platform | 'pc'/'mac' | auto | Platform for hotkey display format | |
| drawerProps | DrawerProps | Additional props for the Drawer component (style, container, hideVeil, etc.) | ||
| disableNavigationOffset | Boolean | false | Whether to disable automatic left offset based on AsideHeader size |
And all the List PropTypes, but not items and filter props (you can find them here)
§CSS API
| Name | Description | Default |
|---|---|---|
--hotkeys-panel-width | The width of the panel | 400px |
--hotkeys-panel-vertical-padding | The panel top and bottom paddings | 18px |
--hotkeys-panel-horizontal-padding | The panel left and right paddings | 24px |
§Usage
See storybook example src/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.