# `PetalComponents.SlideOver`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/slide_over.ex#L1)

# `hide_slide_over`

# `show_slide_over`

# `show_slide_over`

# `show_slide_over`

# `slide_over`

## Attributes

* `id` (`:string`) - Defaults to `"slide-over"`.
* `origin` (`:string`) - slideover point of origin. Defaults to `"right"`. Must be one of `"left"`, `"right"`, `"top"`, or `"bottom"`.
* `close_slide_over_target` (`:string`) - close_slide_over_target allows you to target a specific live component for the close event to go to. eg: close_slide_over_target={@myself}. Defaults to `nil`.
* `close_on_click_away` (`:boolean`) - whether the slideover should close when a user clicks away. Defaults to `true`.
* `close_on_escape` (`:boolean`) - whether the slideover should close when a user hits escape. Defaults to `true`.
* `title` (`:string`) - slideover title. Defaults to `nil`.
* `max_width` (`:string`) - sets container max-width. Defaults to `"md"`. Must be one of `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, or `"full"`.
* `on_open` (`Phoenix.LiveView.JS`) - additional JS commands to run when the slide over opens. Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* `on_close` (`Phoenix.LiveView.JS`) - additional JS commands to run when the slide over closes. Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* `class` (`:any`) - CSS class. Defaults to `nil`.
* `hide` (`:boolean`) - slideover is hidden. Defaults to `false`.
* Global attributes are accepted.
## Slots

* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*