Drawer

Usage

Para usar un drawer, agregue el atributo data-toggle y el valor correspondiente al atributo id del drawer. Para cerrar el drawer, agregue el atributo data-dismiss y el valor drawer al elemento que cerrará el drawer.

<Button data-toggle='drawer-example'>Drawer</Button>
<Drawer id='drawer-example'>
  <h2 slot='title' class='font-medium text-xl'>Title here</h2>
  <div slot='body'>
    <p>Drawer body text goes here.</p>
  </div>
  <div slot='footer' class='flex items-center justify-end gap-2'>
    <Button type='button' data-dismiss='drawer' variant='secondary'>Close</Button>
    <Button type='button' variant='primary'>Save changes</Button>
  </div>
</Drawer>

Placement

Para cambiar la posición del drawer, use el atributo placement con los valores left o right. Por defecto, el drawer se muestra en la parte izquierda de la pantalla.

<Button data-toggle='drawer-left'>Drawer left</Button>
<Drawer id="drawer-left" placement='left'>
  ...
</Drawer>

<Button data-toggle='drawer-right'>Drawer right</Button>
<Drawer id="drawer-right" placement='right'>
  ...
</Drawer>

Sizes

Los tamaños disponibles para los drawers son sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, y full. Por defecto, el tamaño es de 18rem. Para cambiar el tamaño, use el atributo size con el valor deseado.

<Button data-toggle='drawer-example'>Drawer xs</Button>
<Drawer id='drawer-example' size='xs'>
  ...
</Drawer>