@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIDrawer

    A slide-in side panel for navigation, detail views, or form sidebars.

    The drawer slides in from the left or right edge with an overlay backdrop. It supports content projection and two-way binding on the open state.

    <ui-drawer [(open)]="sidebarOpen" position="left" width="medium">
      <h2>Navigation</h2>
      <nav>...</nav>
    </ui-drawer>
    Index

    Constructors

    constructor

    Properties

    ariaLabel closed closeOnBackdropClick closeOnEscape open position width

    Methods

    close onBackdropClick onKeyDown resolvedWidth

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the drawer panel.

    closed: OutputEmitterRef<void> = ...

    Emitted when the drawer is closed by the user.

    closeOnBackdropClick: InputSignal<boolean> = ...

    Whether clicking the backdrop closes the drawer.

    closeOnEscape: InputSignal<boolean> = ...

    Whether pressing Escape closes the drawer.

    open: ModelSignal<boolean> = ...

    Whether the drawer is open. Supports two-way binding via [(open)].

    position: InputSignal<DrawerPosition> = ...

    Side from which the drawer slides in.

    width: InputSignal<string> = ...

    Drawer width. Use a preset ("narrow", "medium", "wide") or any CSS length value (e.g. "400px", "30vw").

    Methods

    • Close the drawer and emit the closed event.

      Returns void

    • Handle backdrop clicks.

      Returns void

    • Handle keyboard events on the drawer.

      Parameters

      • event: KeyboardEvent

      Returns void

    • Resolve width to a CSS value.

      Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods