generated:catalog.entry.drawer.title

generated:catalog.entry.drawer.description

@xngui/components/drawer

import { XDrawer } from '@xngui/components/drawer';

chrome:demo.preview

demo-preview:hints.category.focus:

Tab

demo-preview:hints.category.pointer:

Scroll

demo-preview:hints.category.shortcuts:

Escape

demo-preview:projection.slots-label:

[xHeader]

[xContent]

ng-content

[xFooter]

import { Component } from '@angular/core';

import { XButton } from '@xngui/components/button';

import { XDrawer } from '@xngui/components/drawer';

@Component({

selector: 'app-example',

imports: [XButton, XDrawer],

templateUrl: './drawer.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

side

XDrawerSide

'end'

Edge the panel slides from.

size

XOverlayPaneSize

—

Pane width along the slide axis — overlay axis, not control height. Falls back to XConfigService when unset.

closeOnBackdrop

boolean

—

Dismiss when the backdrop is clicked — falls back to XConfigService when unset.

closeOnEscape

boolean

—

Dismiss when Escape is pressed — falls back to XConfigService when unset.

ariaLabel

string

—

Accessible name when no visible title is labelled via `ariaLabelledBy`.

ariaLabelledBy

string

—

ID of the element that labels the drawer (typically the header title).

closeLabel

string

—

Accessible label for the close button.

showClose

boolean

true

Show the header close button.

generated:catalog.entry.drawer.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-drawer

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title