View Source Beacon.LiveAdmin.AdminComponents (Beacon LiveAdmin v0.1.1)

Provides Admin UI components.

This file contains new components and also overrided Core components.

Summary

Functions

Renders a back navigation link.

Renders a button.

Generates a generic error message.

Renders flash notices.

Shows the flash group with standard titles and content.

Renders an input with label and error messages.

Renders a label.

Renders a data list.

Renders a rounded white panel that is pinned to the bottom of the screen and scrolls.

Renders a modal.

Renders a simple form.

Renders a select input with the available sites to select.

Renders a table with generic styling.

Renders pagination to nagivate table results.

Renders a search input text to filter table results.

Renders a select input to sort table results.

Renders a thumbnail image.

Functions

Renders a back navigation link.

Examples

<.back navigate={~p"/posts"}>Back to posts</.back>

Attributes

  • navigate (:any) (required)

Slots

  • inner_block (required)

Renders a button.

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>

Attributes

  • type (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

Generates a generic error message.

Slots

  • inner_block (required)

Renders flash notices.

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. Defaults to "flash".
  • 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.

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - the map of flash messages.

See Beacon.LiveAdmin.CoreComponents.header/1.

See Beacon.LiveAdmin.CoreComponents.hide/1.

See Beacon.LiveAdmin.CoreComponents.hide/2.

See Beacon.LiveAdmin.CoreComponents.hide_modal/1.

See Beacon.LiveAdmin.CoreComponents.icon/1.

Renders an input with label and error messages.

A %Phoenix.HTML.Form{} and field name may be passed to the input to build input names and error messages, or all the attributes and errors may be passed explicitly.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • type (:string) - Defaults to "text".
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
  • errors (:list) - Defaults to [].
  • checked (:boolean) - the checked flag for checkbox inputs.
  • prompt (:string) - the prompt for select inputs. Defaults to nil.
  • options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
  • multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

  • inner_block

Renders a label.

Attributes

  • for (:string) - Defaults to nil.

Slots

  • inner_block (required)

Renders a data list.

Examples

<.list>
  <:item title="Title"><%= @post.title %></:item>
  <:item title="Views"><%= @post.views %></:item>
</.list>

Slots

  • item (required) - Accepts attributes:
    • title (:string) (required)

Renders a rounded white panel that is pinned to the bottom of the screen and scrolls.

Attributes

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

Slots

  • inner_block (required)

Renders a modal.

Examples

<.modal id="confirm-modal">
  This is a modal.
</.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")}>
  This is another modal.
</.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)

See Beacon.LiveAdmin.CoreComponents.show/1.

See Beacon.LiveAdmin.CoreComponents.show/2.

See Beacon.LiveAdmin.CoreComponents.show_modal/1.

Renders a simple form.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>

Attributes

  • for (:any) (required) - the datastructure for the form.
  • as (:any) - the server side parameter to collect all input under. Defaults to nil.
  • Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target"].

Slots

  • inner_block (required)
  • actions - the slot for form actions, such as a submit button.

Renders a select input with the available sites to select.

Examples

<.site_selector selected_site="dev" options={[:dev, :dy]} />

Attributes

  • selected_site (:string) - Defaults to "".
  • options (:list) - Defaults to [].

Renders a table with generic 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.
Link to this function

table_pagination(assigns)

View Source

Renders pagination to nagivate table results.

Attributes

Renders a search input text to filter table results.

Attributes

Renders a select input to sort table results.

Attributes

Renders a thumbnail image.

Attributes

  • source (:string) - Defaults to nil.

See Beacon.LiveAdmin.CoreComponents.translate_error/1.

Link to this function

translate_errors(errors, field)

View Source

See Beacon.LiveAdmin.CoreComponents.translate_errors/2.