# salla-drawer (https://docs.salla.dev/twilight/react/web-components/salla-drawer)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
import { SallaDrawer } from '@salla.sa/twilight-components-react/drawer';
```

## Try it [#try-it]

<Demo name="web-components/salla-drawer" />

## Example [#example]

```tsx
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>
    </>
  );
}
```

```html
<salla-drawer id="filters-drawer" drawer-title="Filters" position="left" width="sm">
  <p>Filter options go here.</p>
  <div slot="footer"><button type="button">Apply</button></div>
</salla-drawer>
<button onclick="document.getElementById('filters-drawer').open()">Open</button>
```

## Properties [#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 [#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 [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the drawer.

Returns `Promise<HTMLElement>`: A Promise that resolves to the drawer element.

### `loading() => Promise<HTMLElement>` [#loading--promisehtmlelement]

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>` [#open--promisehtmlelement]

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>` [#settitledrawertitle-any--promisehtmlelement]

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>` [#stoploading--promisehtmlelement]

Hides the loading state and shows the content again.

Returns `Promise<HTMLElement>`: A Promise that resolves to the drawer element.

## Slots [#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 [#related]

Renders: [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading).

Used inside: [`<salla-bottom-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-bottom-alert), [`<salla-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-offer).