FlowbitePhoenix.Components.Layout (FlowbitePhoenix v0.1.2)

View Source

Layout components for FlowbitePhoenix using Flowbite CSS framework.

This module provides layout-related components including modals, tables, cards, and headers with consistent Flowbite styling.

Summary

Functions

Renders a card with Flowbite styling.

Renders a card header.

Renders a header with title using consistent styling.

Renders a Heroicon.

Renders a modal using Flowbite styling.

Renders a table with Flowbite styling.

Functions

card(assigns)

Renders a card with Flowbite styling.

Examples

<.card>
  <.card_header>Card Title</.card_header>
  <p>Card content goes here.</p>
</.card>

Attributes

  • class (:string) - Defaults to "".

Slots

  • inner_block (required)

card_header(assigns)

Renders a card header.

Attributes

  • class (:string) - Defaults to "".

Slots

  • inner_block (required)

header(assigns)

Renders a header with title using consistent styling.

Examples

<.header>
  Account Settings
  <:subtitle>Manage your account email address and password settings</:subtitle>
</.header>

Attributes

  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)
  • subtitle
  • actions

hide(js \\ %JS{}, selector)

hide_modal(js \\ %JS{}, id)

icon(assigns)

Renders a Heroicon.

Heroicons come in three styles – outline, solid, and mini. By default, the outline style is used, but solid and mini may be applied by using the -solid and -mini suffix.

You can customize the size and colors of the icons by setting width, height, and background color classes.

Icons are extracted from the deps/heroicons directory and bundled within your compiled app.css by the plugin in your assets/tailwind.config.js.

Examples

<.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />

Attributes

  • name (:string) (required)
  • class (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.

modal(assigns)

Renders a modal using Flowbite styling.

Examples

<.modal id="confirm-modal">
  <:title>Confirm Action</:title>
  This is a modal with Flowbite styling.
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  <:title>Navigate Modal</:title>
  This modal will navigate on cancel.
</.modal>

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

  • inner_block (required)
  • title

show(js \\ %JS{}, selector)

show_modal(js \\ %JS{}, id)

table(assigns)

Renders a table with Flowbite styling.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.table>

Attributes

  • id (:string) (required)
  • rows (:list) (required)
  • row_id (:any) - the function for generating the row id. Defaults to nil.
  • row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
  • row_item (:any) - the function for mapping each row before calling the :col and :action slots. Defaults to &Function.identity/1.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
  • action - the slot for showing user actions in the last table column.