A viewport-edge panel for supporting content, with optional header and footer slots. Opens from the left by default; alignment="right" selects the right edge.
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
import '@southleft/al-web-components/components/drawer';
import { ALDrawer } from '@southleft/al-react';
API — 6 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
alignment'right'Alignment
- **right** Aligns the drawer to the right of the viewport—
widthnumberWidth of drawer panel when expanded / collapsed as side panel—
hasBackdropbooleanFade/ghost back the page background content—
isActivebooleanIs active?
- **true** Shows the drawer container
- **false** Hides the drawer container—
ariaLabelledBystringAria Labelled By attribute
- Dynamically set for A11y—
disableBackdropClickbooleanDisable to close the drawer on outside click—
SLOTS4
SLOTDESCRIPTION
headerDrawer heading content.
footerDrawer footer content.
triggerThe control that opens the drawer.
(default)The drawer content
EVENTS3
EVENTDESCRIPTIONTYPE
onDrawerOpenFired when the drawer opens. Detail: `{ active }` — the new open state.CustomEvent
onDrawerCloseFired when the drawer closes by any means. Detail: `{ active }`.CustomEvent
onDrawerCloseButtonFired only when the drawer's close button is activated. Detail: `{ active }`. Use `onDrawerClose` to catch every close path.CustomEvent
PUBLIC METHODS6
METHODDESCRIPTION
setAria()Set aria-expanded to the trigger button 1. Dynamically sets the aria-labelledby for A11y 2. Set isExpanded to this.isActive if it's truthy, otherwise, set it to false
setWidth()Set the width 1. Add a custom property to adjust the width of the drawer container
setBodyOverflow()Set body overflow 1. If the drawer is active, prevent scrolling on the body 2. If the drawer is inactive, allow scrolling on the body
handleOnClickOutside()Handles the click event outside the component: 1. Check if the drawer is active 2. Determine if the click occurred inside the active drawer 3. Check if the click occurred outside the active drawer 4. Close the drawer if the click occurred outside it
handleOnKeydown()Handle on keydown events 1. When the Enter key is pressed on the trigger, open the drawer and prevent default button click 2. If the drawer is open and escape is keyed, close the drawer and return focus to the trigger button
handleOnCloseButton()Handle on click of close button 1. Toggle the active state between true and false 2. Dispatch a custom event on click of close button