overlay

Drawer

A drawer component for Angular.

Preview

A preview of the Drawer component with interactive controls.

Preview Code
Interactive

Installation

Add the Drawer component to your project.

Bash
ng g @ng-cn/core:c drawer

Usage

Import and use the Drawer component in your Angular application.

Template TypeScript
template.html
<Drawer>
  <DrawerTrigger>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>
        Make changes to your profile here. Click save when you're done.
      </DrawerDescription>
    </DrawerHeader>
    <div class="p-4 pb-0">
      <p class="text-sm text-muted-foreground">
        This is the drawer content area. You can put any content here.
      </p>
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

Explore different variations and use cases for the Drawer component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
open boolean — Whether the drawer is open.