salla-drawer
A side panel that slides in from the left or right edge of the screen, with an optional title, subtitle, icon and footer.
A side panel that slides in from the left or right edge of the screen, with an optional title, subtitle, icon and footer.
Use it for content that should open next to the page, such as filters, a cart preview or a form.
It is the drawer counterpart of salla-modal. The component moves itself to the end of document.body when it loads. It is hidden until opened.
Open and close it with the open() and close() methods, by setting or removing the visible attribute, or by emitting drawer::open or drawer::close through salla.event with the drawer's id as the argument. If no id is set, it gets the id salla-drawer.
The title is read once from the drawer-title attribute when the element is created (there is no property for it). Change it later with setTitle().
Accessibility: the host has role="dialog" and aria-modal="true". Pressing Escape or clicking the backdrop closes it unless is-closable is false. When opened, the first input, textarea or select inside it is focused.
Use it
In HTML or JSX, use the tag <salla-drawer> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaDrawer } from '@salla.sa/twilight-components-react/drawer';Try it
Example
import { SallaDrawer } from '@salla.sa/twilight-components-react/drawer';
export function Example() {
return (
<>
<SallaDrawer id="filters-drawer" drawerTitle="Filters" position="left" width="sm">
<p>Filter options go here.</p>
<div slot="footer"><button type="button">Apply</button></div>
</SallaDrawer>
<button onClick={() => document.getElementById('filters-drawer').open()}>Open</button>
</>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
centered | centered | Centers the header content (adds the s-drawer-is-center class to the header). | boolean | false |
hasSkeleton | has-skeleton | Only used while the drawer is loading: when true the loading state uses the md width (to fit skeleton content in the loading slot), otherwise the narrow xs width. | boolean | false |
iconStyle | icon-style | Shows a header icon: error shows an alert icon, and any other value (success, primary, normal) shows a check icon. The value also adds a style class to the icon. With no value, no icon is shown. Only shown when the drawer has a title or sub-title, and replaced by the icon slot if you provide one. | "error" | "normal" | "primary" | "success" | undefined |
isClosable | is-closable | Lets the customer close the drawer with the close button, the backdrop or the Escape key. Set to false for a drawer that can only be closed from code. | boolean | true |
isLoading | is-loading | Shows the loading state (the loading slot, or a spinner) in place of the content. The loading() and stopLoading() methods change this. | boolean | false |
noPadding | no-padding | Removes the padding of the drawer body. Useful for full-bleed content such as images or a list that draws its own spacing. | boolean | false |
position | position | Which edge of the screen the drawer slides in from: left or right. Note these are physical sides and do not flip in right-to-left pages. | "left" | "right" | 'right' |
subTitle | sub-title | Subtitle text shown under the title. It is inserted as HTML, so only pass trusted content. | string | '' |
subTitleFirst | sub-title-first | Adds the s-drawer-title-below class to the title. The markup order (title, then subtitle) does not change, so the visual effect depends on the styles that target that class. | boolean | false |
visible | visible | Whether the drawer is open. Setting or removing this attribute opens or closes it, the same as the open() and close() methods. | boolean | false |
width | width | Width of the drawer: xs, sm, md, lg, xl or full. While the drawer is loading, the width is md when has-skeleton is set, otherwise xs. | "full" | "lg" | "md" | "sm" | "xl" | "xs" | 'md' |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
drawerVisibilityChanged | Fires when the drawer opens or closes. event.detail is true when it opens and false when it closes. | Boolean |
Methods
Call these on the element or a React ref.
close() => Promise<HTMLElement>
Closes the drawer.
Returns Promise<HTMLElement>: A Promise that resolves to the drawer element.
loading() => Promise<HTMLElement>
Shows the loading state, the same as setting is-loading to true.
Returns Promise<HTMLElement>: A Promise that resolves to the drawer element.
open() => Promise<HTMLElement>
Opens the drawer and focuses its first input, textarea or select, if there is one.
Returns Promise<HTMLElement>: A Promise that resolves to the drawer element.
setTitle(drawerTitle: any) => Promise<HTMLElement>
Changes the drawer title. The value is inserted as HTML, so only pass trusted content.
| Parameter | Type | Description |
|---|---|---|
drawerTitle | any | The new title text. |
Returns Promise<HTMLElement>: A Promise that resolves to the drawer element.
stopLoading() => Promise<HTMLElement>
Hides the loading state and shows the content again.
Returns Promise<HTMLElement>: A Promise that resolves to the drawer element.
Slots
| Slot | Description |
|---|---|
| (default) | Main content of the drawer. |
footer | Content shown at the bottom of the drawer, after the main content. |
icon | Replaces the header icon. Only rendered when the drawer has a title or sub-title. |
loading | Content shown while the drawer is loading (is-loading is true or loading() was called). Defaults to a loading spinner. |
Related
Renders: <salla-loading>.
Used inside: <salla-bottom-alert>, <salla-offer>.
salla-count-down
A countdown timer to a given date, showing days, hours, minutes and seconds that update every second.
salla-infinite-scroll
Wraps a paginated list and loads the next page into it, either when the visitor clicks a "Load more" button that it adds after the list, or automatically on scroll.