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

Renders an app shell representing the base of your layout.

Attributes

• socket (:any) (required) - the socket.

• 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.

• sidebar_open (:boolean) - initial sidebar open state. Defaults to true.

• preferences_manifest (:map) - adapter-route manifest assigned by Backpex.InitAssigns. Pass @preferences_manifest so the browser can preserve session-wide values while isolating values from narrower adapter scopes.

  Defaults to nil.

• preferences_path (:string) - preference endpoint path. Pass an explicit path when the route contains dynamic segments (for example /tenants/:tenant/backpex_preferences) or when the router contains multiple preferences routes.

  Defaults to nil.

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_toggle_icon - icon displayed in the sidebar toggle button; defaults to hero-bars-3-solid.
• sidebar_branding - branding to be displayed above the sidebar navigation, e.g. Backpex.HTML.Layout.sidebar_branding/1.
• sidebar - navigation items to be displayed in the sidebar, e.g. Backpex.HTML.Layout.sidebar_item/1 and Backpex.HTML.Layout.sidebar_section/1. The slot content is wrapped in the scrollable menu container and the <ul> those components require. Accepts attributes:
  • class (:string) - additional class that will be added to the component.
• footer - content to be displayed in the footer.

Get the Backpex logo SVG.

Attributes

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

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

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".

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

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.

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

Renders a title.

Attributes

• class (:string) - additional class that will be added to the component. Defaults to "".

Slots

• inner_block

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)

Renders the element that wires up preference persistence.

Required for preferences to persist. Every preference write — the theme selector, sidebar state, sidebar sections, and any push_event from a LiveResource — is sent by the BackpexPreferences JS hook, and this element is where the hook learns the endpoint to POST to. Without it on the page, writes are dropped with a console warning: the UI still updates optimistically, so nothing looks broken until the next reload reverts it.

app_shell/1 renders this for you. Render it yourself, once per page, only if you build a layout without app_shell/1:

<.preferences_root socket={@socket} preferences_manifest={@preferences_manifest} />

Examples

<Backpex.HTML.Layout.preferences_root
  socket={@socket}
  preferences_manifest={@preferences_manifest}
  preferences_path={~p"/tenants/#{@tenant.id}/backpex_preferences"}
/>

Attributes

• socket (:any) (required) - the socket.

• preferences_manifest (:map) - adapter-route manifest assigned by Backpex.InitAssigns. Pass @preferences_manifest so the browser can preserve session-wide values while isolating values from narrower adapter scopes.

  Defaults to nil.

• preferences_path (:string) - explicit preference endpoint path; required when the route contains dynamic segments or the router has multiple preference routes. Defaults to nil.

Renders the sidebar branding. Belongs in the :sidebar_branding slot of app_shell/1.

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.

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

Renders a sidebar section.

Attributes

• class (:string) - additional class that will be added to the component. Defaults to nil.
• id (:string) (required) - A unique id for this section. Used as the final segment of the global.sidebar_section.<id> preference key, in the browser hook's attribute selector, and to wire aria-controls. Use only ASCII letters, digits, underscores, and hyphens ([A-Za-z0-9_-]+); dots/colons alter key parsing and quotes/backslashes are unsafe in the selector.
• sidebar_section_states (:map) - map of section states, as assigned by Backpex.InitAssigns. Pass @sidebar_section_states explicitly — this is a function component, so an omitted attr does not inherit the surrounding assign, it defaults to %{} and every section renders open. Unknown section ids default to open. Defaults to %{}.

Slots

• inner_block - section entries rendered with sidebar_item/1 or nested sidebar_section/1; custom leaf elements must include data-sidebar-item so non-empty sections are visible.
• label (required) - label to be displayed on the section.

Renders a theme selector.

Attributes

• class (:string) - Defaults to nil.
• label (:string) - Defaults to "Theme".
• current_theme (:string) - the currently selected theme. Defaults to nil.
• themes (:list) - A list of tuples with {theme_label, theme_name} format. Examples include [{"Light", "light"}, {"Dark", "dark"}].

Renders a topbar.

Attributes

• class (:string) - additional class to be added to the component. Defaults to "".

Slots

• inner_block

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.