Brand
Changelog v1.4

Brand Drawer

<brand-drawer> wraps Shoelace's <sl-drawer>. Same modality as <brand-dialog> but slides in from a screen edge.

Placements

End (right) Start (left) Top Bottom

Slides in from the end edge (right in LTR, left in RTL).

Cancel Save

Slides in from the start edge.

Slides down from the top.

Slides up from the bottom.

Form inside a drawer

Edit profile
Cancel Save

Usage

import { BrandDrawer } from '@brandos/ui';

<brand-drawer label="Settings" placement="end" id="settings">
  <p>Drawer body.</p>
  <brand-button slot="footer" variant="primary">Save</brand-button>
</brand-drawer>

document.getElementById('settings').show();