# xpl-backdrop

This backdrop is used to add a transparent darker layer on top of the content area to focus the user’s attention. Typically used when a dialog such as a modal or slide out panel is active. 

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description | Type      | Default |
| ---------- | ---------- | ----------- | --------- | ------- |
| `relative` | `relative` |             | `boolean` | `false` |


## Dependencies

### Used by

 - [xpl-application-shell](../xpl-application-shell)
 - [xpl-modal](../xpl-modal)
 - [xpl-side-nav](../xpl-side-nav)
 - [xpl-slideout](../xpl-slideout)

### Graph
```mermaid
graph TD;
  xpl-application-shell --> xpl-backdrop
  xpl-modal --> xpl-backdrop
  xpl-side-nav --> xpl-backdrop
  xpl-slideout --> xpl-backdrop
  style xpl-backdrop fill:#f9f,stroke:#333,stroke-width:4px
```

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

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