Drawer — Playground
Drawer is a service, not a rendered instance: click the trigger to call kuiDrawer(component, config)(data) with the current values below. The panel renders in a CDK overlay outside this preview stage, matching real usage.
side
size
State
const openDrawer = kuiDrawer(MyDrawer);
openDrawer({
title: 'Filter results',
message: 'Adjust filters and confirm to apply them.',
})
.pipe(takeUntilDestroyed())
.subscribe();| Name | Type | Default | Description |
|---|---|---|---|
| kuiDrawer(component, config?) | (component: Type<TComponent>, config?: Omit<KuiDrawerConfig, "data">) => (data: TData) => Observable<TResult | undefined> | - | Inject-function factory. Call once per injection context to get a typed opener bound to that component. |
| KuiDrawerHost<TResult, TData> | interface | - | Contract your drawer component implements. Requires a drawerContext property injected from KUI_DRAWER_CONTEXT. |
| KUI_DRAWER_CONTEXT | InjectionToken<KuiDrawerContext<TResult, TData>> | - | Injected inside the drawer component to read data and close the drawer. |
| drawerContext.data | TData | - | Data passed via the opener call, e.g. openDrawer(data). |
| drawerContext.side | KuiDrawerSide | - | Drawer side resolved from KuiDrawerConfig.side, read-only. |
| drawerContext.size | KuiDrawerSize | - | Drawer size preset resolved from KuiDrawerConfig.size, read-only. |
| drawerContext.closable | boolean | - | Mirrors KuiDrawerConfig.closable. Informational only -- the container renders .kui-drawer-close itself when true. |
| drawerContext.close(result?) | (result?: TResult) => void | - | Closes the drawer, optionally emitting a typed result to the opener subscription. |
| KuiDrawerConfig.data | TData | undefined | Available on the low-level config type; kuiDrawer() passes feature data through the returned opener function instead. |
| KuiDrawerConfig.side | 'right' | 'left' | 'bottom' | 'top' | 'right' | Edge from which the drawer enters and docks. |
| KuiDrawerConfig.size | 'sm' | 'md' | 'lg' | 'full' | 'auto' | 'md' | Width for left/right drawers, height for top/bottom drawers. 'auto' sizes to content (min 320px width for left/right, min 200px height for top/bottom). |
| KuiDrawerConfig.closeOnBackdropClick | boolean | true | Closes the drawer on backdrop click. Disable for required actions. |
| KuiDrawerConfig.closeOnEscape | boolean | true | Closes the drawer on Escape. Disable for required actions. |
| KuiDrawerConfig.closable | boolean | true | Shows the .kui-drawer-close button the container renders automatically, absolutely positioned top-right of the panel. |
| KuiDrawerRef<TResult> | class | - | Return type of kuiDrawer(component, config). Calling it with data opens the drawer and returns Observable<TResult | undefined>. |
| .kui-drawer-header / .kui-drawer-title / .kui-drawer-subtitle | CSS classes | - | Header structure classes. .kui-drawer-title is wired as aria-labelledby automatically when present. |
| .kui-drawer-body / .kui-drawer-footer | CSS classes | - | Scrollable content region and action row classes. |
| --kui-drawer-bg | CSS custom property | - | Panel background color. |
| --kui-drawer-border | CSS custom property | - | Panel border color. |
| --kui-drawer-radius | CSS custom property | - | Panel corner radius. |
| --kui-drawer-backdrop-bg | CSS custom property | - | Backdrop fill color. |
| --kui-drawer-width-sm / -md / -lg | CSS custom properties | - | Width presets used by left/right drawers. |
| --kui-drawer-height-sm / -md / -lg | CSS custom properties | - | Height presets used by top/bottom drawers. |
| --kui-drawer-duration-open / -close | CSS custom properties | - | Enter/exit animation durations. |
API verified against @kikita-labs/ui v1.6.1 public typings.