Drawer

Name: wdc-ui
Author: wdcoders

A panel that slides in from the edge of the screen, commonly used for navigation, details, or forms.

Installation

npx wdc add drawer

Examples

Drawer

Drawer with left and right positions

Code

<wdc-button (click)="openDrawer('right')" variant="outline">Open Right</wdc-button>
<wdc-button (click)="openDrawer('left')" variant="outline">Open Left</wdc-button>

<wdc-drawer [open]="isOpen()" [side]="activeSide()" (openChange)="isOpen.set(false)">
  <wdc-drawer-header>
    <wdc-drawer-title>Edit Profile</wdc-drawer-title>
    <wdc-drawer-description>Make changes to your profile here.</wdc-drawer-description>
  </wdc-drawer-header>
   <wdc-drawer-content>
    <div class="space-y-4">
      <wdc-input label="Name" value="Kamal Kumar" />
      <wdc-input label="Email" value="kamal@example.com" />
    </div>
  </wdc-drawer-content>
   <wdc-drawer-footer>
    <wdc-button variant="outline" (click)="isOpen.set(false)">Cancel</wdc-button>
    <wdc-button (click)="saveChanges()">Save Changes</wdc-button>
  </wdc-drawer-footer>
</wdc-drawer>

API Reference

Input	Type	Default	Description
isOpen	boolean	false	Whether the sidebar is open or not.
position	'left' \| 'right'	'left'	Position of the sidebar.
closeOnBackdropClick	boolean	true	Whether to close the sidebar when clicking on the backdrop.
close	void	undefined	Callback function to be called when the sidebar is closed.