FlowbitePhoenix.Components.Layout (FlowbitePhoenix v0.1.2)
View SourceLayout 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.
Examples
<.card>
<.card_header>Card Title</.card_header>
<p>Card content goes here.</p>
</.card>
Attributes
class
(:string
) - Defaults to""
.
Slots
inner_block
(required)
Renders a card header.
Attributes
class
(:string
) - Defaults to""
.
Slots
inner_block
(required)
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 tonil
.
Slots
inner_block
(required)subtitle
actions
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 tonil
.id
(:string
) - Defaults tonil
.
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 tofalse
.on_cancel
(Phoenix.LiveView.JS
) - Defaults to%Phoenix.LiveView.JS{ops: []}
.
Slots
inner_block
(required)title
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 tonil
.row_click
(:any
) - the function for handling phx-click on each row. Defaults tonil
.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.