Renders an alert.

Attributes

• class (:string) - additional class to be added to the component. Defaults to nil.
• kind (:atom) - 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) - event triggered on alert close. Defaults to %Phoenix.LiveView.JS{ops: []}.
• 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

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

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

• 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

• 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 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) - 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)
• 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"}].

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

Slots

• label (required) - label of the dropdown.