FlowbitePhoenix.Components.Feedback (FlowbitePhoenix v0.1.2)

View Source

Feedback components for FlowbitePhoenix using Flowbite CSS framework.

This module provides feedback-related components including alerts, badges, flash messages, and spinners with consistent Flowbite styling.

Summary

Functions

Renders a Flowbite alert component.

Renders a badge with Flowbite styling.

Renders flash notices using Flowbite alert styling.

Shows the flash group with standard titles and content.

Renders a spinner with Flowbite styling.

Functions

alert(assigns)

Renders a Flowbite alert component.

Examples

<.alert color="green">Success! Your changes have been saved.</.alert>
<.alert color="red" dismissible={true}>Error! Something went wrong.</.alert>

Attributes

  • color (:string) - Defaults to "blue". Must be one of "blue", "red", "green", "yellow", or "gray".
  • dismissible (:boolean) - Defaults to false.
  • class (:string) - Defaults to "".
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

badge(assigns)

Renders a badge with Flowbite styling.

Examples

<.badge>Default</.badge>
<.badge color="green">Success</.badge>
<.badge color="red" size="sm">Error</.badge>

Attributes

  • color (:string) - Defaults to "blue". Must be one of "blue", "gray", "red", "green", "yellow", "indigo", "purple", or "pink".
  • size (:string) - Defaults to "default". Must be one of "xs", "sm", or "default".
  • class (:string) - Defaults to "".

Slots

  • inner_block (required)

flash(assigns)

Renders flash notices using Flowbite alert styling.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

Attributes

  • id (:string) - the optional id of flash container.
  • flash (:map) - the map of flash messages to display. Defaults to %{}.
  • title (:string) - Defaults to nil.
  • kind (:atom) - used for styling and flash lookup. Must be one of :info, or :error.
  • Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

  • inner_block - the optional inner block that renders the flash message.

flash_group(assigns)

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - the map of flash messages.
  • id (:string) - the optional id of flash container. Defaults to "flash-group".

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

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

spinner(assigns)

Renders a spinner with Flowbite styling.

Examples

<.spinner />
<.spinner size="lg" />

Attributes

  • size (:string) - Defaults to "default". Must be one of "sm", "default", or "lg".
  • class (:string) - Defaults to "".