Skip to main content

Drawer

<sc-drawer></sc-drawer>

This component let users create drawer.

OpenContent

Component Codex

Properties

PropertyDescriptionTypeDefault
containedBy default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.booleanfalse
labelThe drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.string''
noHeaderRemoves the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.booleanfalse
openIndicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.booleanfalse
placementThe direction from which the drawer will open."bottom" | "end" | "start" | "top"'end'
stickyHeaderSticky drawer headerbooleanfalse

Events

EventDescriptionType
scAfterHideCustomEvent<void>
scAfterShowCustomEvent<void>
scHideCustomEvent<void>
scInitialFocusCustomEvent<void>
scRequestCloseCustomEvent<"close-button" | "keyboard" | "method" | "overlay">
scShowCustomEvent<void>

Methods

requestClose(source?: 'close-button' | 'keyboard' | 'overlay' | 'method') => Promise<void>

Shadow Parts

PartDescription
base
body
close-button
footer
header
header-suffix
overlay
panel
title

Used By