# xpl-slideout

Content and Footer subcomponents are optional and can be hidden.  Slideout always has a header with an X close button upper right. Slide Out Panel OPTIONALLY uses the [<xpl-backdrop>](https://apollo.xplordocs.com/?path=/story/components-backdrop--backdrop) component to overlay content and create focus on the Slide Out Panel content.

<!-- Auto Generated Below -->


## Properties

| Property     | Attribute     | Description                                                              | Type                     | Default     |
| ------------ | ------------- | ------------------------------------------------------------------------ | ------------------------ | ----------- |
| `backdrop`   | `backdrop`    | Whether to show a backdrop behind the slideout.                          | `boolean`                | `false`     |
| `isOpen`     | `is-open`     | Whether the slideout is open.                                            | `boolean`                | `false`     |
| `showFooter` | `show-footer` | Whether to show the footer section in the slideout.                      | `boolean`                | `true`      |
| `variant`    | `variant`     | The visual style variant of the slideout. Can be 'default' or 'warning'. | `"default" \| "warning"` | `'default'` |


## Events

| Event          | Description                               | Type                   |
| -------------- | ----------------------------------------- | ---------------------- |
| `isOpenChange` | Emitted when the isOpen property changes. | `CustomEvent<boolean>` |


## Dependencies

### Depends on

- [xpl-backdrop](../xpl-backdrop)
- [xpl-button](../xpl-button)
- [xpl-icon](../xpl-icon)
- [xpl-divider](../xpl-divider)

### Graph
```mermaid
graph TD;
  xpl-slideout --> xpl-backdrop
  xpl-slideout --> xpl-button
  xpl-slideout --> xpl-icon
  xpl-slideout --> xpl-divider
  xpl-button --> xpl-icon
  style xpl-slideout fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*