# `Backpex.HTML.Layout`
[🔗](https://github.com/naymspace/backpex/blob/0.18.3/lib/backpex/html/layout.ex#L1)

Contains all Backpex layout components.

# `alert`

Renders an alert.

## Attributes

* `id` (`:string`) - optional id of the alert container; when not provided, a default of "flash-<kind>" is used.
* `flash` (`:map`) - the map of flash messages to display. Defaults to `%{}`.
* `class` (`:string`) - additional class to be added to the component. Defaults to `nil`.
* `kind` (`:atom`) (required) - used for styling. Must be one of `:info`, `:success`, `:warning`, or `:error`.
* `closable` (`:boolean`) - show or hide the close button. Defaults to `true`.
* `on_close` (`Phoenix.LiveView.JS`) - optional event triggered on alert close. Defaults to `nil`.
* `close_label` (`:string`) - Defaults to `"Close alert"`.
* `title` (`:string`) - title for the alert. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`
* `icon`

# `app_shell`

Renders an app shell representing the base of your layout.

## Attributes

* `live_resource` (`:atom`) - live resource module. Defaults to `nil`.
* `class` (`:string`) - class added to the app shell container. Defaults to `nil`.
* `fluid` (`:boolean`) - toggles fluid layout. Defaults to `false`.
## Slots

* `inner_block`
* `topbar` - content to be displayed in the topbar. Accepts attributes:

  * `class` (`:string`) - additional class that will be added to the component.
* `sidebar` - content to be displayed in the sidebar. Accepts attributes:

  * `class` (`:string`) - additional class that will be added to the component.
* `footer` - content to be displayed in the footer.

# `backpex_logo`

Get the Backpex logo SVG.

## Attributes

* `class` (`:string`) - class that will be added to the SVG element. Defaults to `nil`.

# `field_container`

Renders the form label and input with corresponding margin and alignment.

## Attributes

* `class` (`:any`) - extra classes to be added. Defaults to `nil`.
## Slots

* `label` - Accepts attributes:

  * `align` (`:atom`) - Must be one of `:top`, `:center`, or `:bottom`.
* `inner_block`

# `flash_messages`

Renders flash messages.

## Attributes

* `flash` (`:map`) (required) - flash map that will be passed to `Phoenix.Flash.get/2`.
* `close_label` (`:string`) - Defaults to `"Close alert"`.

# `footer`

Renders a footer. It provides a default look when no content is provided.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `""`.
## Slots

* `inner_block`

# `input_label`

Renders a text to be used as a label for an input.

## Attributes

* `as` (`:string`) - html tag name. Defaults to `"label"`.
* `text` (`:string`) - text of the label.
* `for` (`:any`) - form element the label is bound to. Defaults to `nil`.
* Global attributes are accepted.

# `main_container`

Container to wrap main elements and add margin.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `""`.
## Slots

* `inner_block`

# `main_title`

Renders a title.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `""`.
## Slots

* `inner_block`

# `modal`

Renders a modal.

## Attributes

* `id` (`:string`) (required) - modal ID.
* `class` (`:string`) - class for the modal wrapper. Defaults to `nil`.
* `box_class` (`:string`) - class for the modal box. Defaults to `"max-w-xl"`.
* `title` (`:string`) - modal title. Defaults to `nil`.
* `close_label` (`:string`) - Defaults to `"Close modal"`.
* `open` (`:boolean`) - modal open. Defaults to `true`.
* `on_cancel` (`Phoenix.LiveView.JS`) - event triggered on modal close. Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `sidebar_item`

Renders a sidebar item. It uses `Phoenix.Component.link/1` component, so you can can use link and href navigation.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `""`.
* `current_url` (`:string`) - the current url.
* `navigate` (`:string`)
* `patch` (`:string`)
* `href` (`:any`)
## Slots

* `inner_block`

# `sidebar_section`

Renders a sidebar section.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `nil`.
* `id` (`:string`) - The id for this section. It will be used to save and load the opening state of this section from local storage. Defaults to `"section"`.
## Slots

* `inner_block`
* `label` (required) - label to be displayed on the section.

# `theme_selector`

Renders a theme selector.

## Attributes

* `socket` (`:any`) (required)
* `class` (`:string`) - Defaults to `nil`.
* `label` (`:string`) - Defaults to `"Theme"`.
* `themes` (`:list`) - A list of tuples with {theme_label, theme_name} format. Examples include `[{"Light", "light"}, {"Dark", "dark"}]`.

# `topbar`

Renders a topbar.

## Attributes

* `class` (`:string`) - additional class to be added to the component. Defaults to `""`.
## Slots

* `inner_block`

# `topbar_branding`

Renders the topbar branding.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `""`.
* `title` (`:string`) - title that will be displayed next to the logo. Defaults to `"Backpex"`.
* `hide_title` (`:boolean`) - if the title should be hidden. Defaults to `false`.
## Slots

* `logo` - the logo of the branding.

# `topbar_dropdown`

Renders a topbar dropdown.

## Attributes

* `class` (`:string`) - additional class that will be added to the component. Defaults to `nil`.
* `aria_label` (`:string`) - accessible label for screen readers. Defaults to `"User menu"`.
## Slots

* `label` (required) - label of the dropdown.

# `close_modal`

# `open_modal`

# `visible_fields_by_panel`

Filters fields by certain panel.

## Examples

    iex> Backpex.HTML.Layout.visible_fields_by_panel([field1: %{panel: :default}, field2: %{panel: :panel}], :default, nil)
    [field1: %{panel: :default}]

    iex> Backpex.HTML.Layout.visible_fields_by_panel([field1: %{panel: :default, visible: fn _assigns -> false end}, field2: %{panel: :panel}], :default, nil)
    []

    iex> Backpex.HTML.Layout.visible_fields_by_panel([field1: %{panel: :default}], :panel, nil)
    []

---

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