The backdrop component is used to provide emphasis on a particular element or parts of it.
The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the backdrop component will add a dimmed layer over your application.
Below you can view various demos with example markup.
The component ships with helper JS-based functions for showing/hiding the component.
<.button phx-click={show_backdrop("#basic-backdrop")}>
Show Basic Backdrop
</.button>
<.backdrop
id={"basic-backdrop"}
open={false}
phx-click={hide_backdrop("#basic-backdrop")}
phx-key="escape"
phx-window-keydown={hide_backdrop("#basic-backdrop")}
/>
If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component.
<.button phx-click={show_backdrop("#invisible-backdrop")}>
Show Invisible Backdrop
</.button>
<.backdrop
id={"invisible-backdrop"}
invisible
open={false}
phx-click={hide_backdrop("#invisible-backdrop")}
phx-key="escape"
phx-window-keydown={hide_backdrop("#invisible-backdrop")}
>
<div class="flex items-center justify-center h-full w-full border">
<.typography variant="h1">Invisible</.typography>
</div>
</.backdrop>
Add a Tailwind-supported duration value for the transition, in milliseconds.
<.button phx-click={show_backdrop("#transition-duration-backdrop")}>
Show 1 Sec Transition Backdrop
</.button>
<.backdrop
id={"transition-duration-backdrop"}
open={false}
phx-click={hide_backdrop("#transition-duration-backdrop")}
phx-key="escape"
phx-window-keydown={hide_backdrop("#transition-duration-backdrop")}
transition_duration={1_000}
/>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Backdrop
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| element | Any HTML Element | div | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| invisible | bool | false | |
| open | bool | false | Whether or not to display in open state by default or override. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| transition_duration | integer | 300 | Tailwind-supported duration value. |