@kit-ng-ui/drawer

Side / top / bottom slide-in panel — both declarative <kit-drawer> and imperative KitDrawerService.

pnpm add @kit-ng-ui/drawer

@use '@kit-ng-ui/drawer/styles' as drawer;

Declarative

import { KitDrawerComponent } from '@kit-ng-ui/drawer';

<kit-drawer [(open)]="open" title="Settings" placement="right" [size]="480">
  <p>Settings body…</p>
</kit-drawer>

Imperative

private readonly drawer = inject(KitDrawerService);

editProfile(profile: Profile) {
  const ref = this.drawer.create({
    title: 'Edit profile',
    content: ProfileFormComponent,
    componentInputs: { profile },
    placement: 'right',
    size: 480,
    onClose: () => this.confirmDiscard(),  // Promise<false> keeps the drawer open
  });
  ref.afterClosed().then(() => this.refresh());
}

options.content accepts a string, a TemplateRef<unknown>, or a component class (paired with componentInputs).

API — <kit-drawer> inputs

| Input | Description | Type | Default | | -------------- | -------------------------------------------------------------------- | ------------------------------------------------- | ----------- | | className | Extra class on the drawer root. | string \| null | null | | closable | Render the close (×) button. | boolean | true | | keyboard | Close on Escape. | boolean | true | | mask | Render the backdrop. | boolean | true | | maskClosable | Close when the backdrop is clicked. | boolean | true | | open | Two-way bound open state. | boolean | false | | placement | Edge of the viewport the drawer slides in from. | 'left' \| 'right' \| 'top' \| 'bottom' | 'right' | | size | Width (left/right) or height (top/bottom). Number = px, or any CSS length. | number \| string | 378 | | title | Header text. Falls back to [titleTpl]. | string \| null | null | | titleTpl | Header template. Overrides [title]. | TemplateRef \| null | null |

Notes

• Same v0.1 containing-block caveat as <kit-modal>: the declarative form renders inline. Use KitDrawerService to escape transform/filter ancestors.
• Body scroll is locked while any drawer is open.
• Escape closes the drawer unless [keyboard]="false".