Renders an app shell representing the base of your layout.

Attributes

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

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 (:string) - extra classes to be added. Defaults to "".

Slots

• label (required) - 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.

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

• text (:string) - text of the label.

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

• title (:string) - modal title. Defaults to nil.
• target (:string) - live component for the close event to go to. Defaults to nil.
• close_event_name (:string) - close event name. Defaults to "close-modal".
• max_width (:string) - modal max width. Defaults to "md".
• open (:boolean) - modal open. Defaults to true.
• Global attributes are accepted.

Slots

• inner_block

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

Renders a theme selector.

Attributes

• socket (:any) (required)
• 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 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.

Renders a topbar dropdown.

Attributes

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

Slots

• label (required) - label of the dropdown.