Aurora.Uix.Templates.Basic.CoreComponents (Aurora UIX v0.1.5-rc.2)

Copy Markdown

Provides the core set of reusable UI components for Aurora UIX, including modals, tables, forms, flash messages, and more.

Most functions in this module are equivalent to those in the original Phoenix Framework's core_components.ex, with some stylistic changes for Aurora UIX, but retaining 100% compatibility with the Phoenix API and usage patterns.

Key Features

  • Provides modal, table, form, flash, and input components for LiveView UIs.
  • All components are built with CSS classes for customization via the theme system.
  • Includes icon support via Heroicons. See icon/1 for usage.
  • Designed for extensibility and override in your own application.
  • Well-documented with doc strings and declarative assigns for each component.
  • All components are compatible with Phoenix LiveView and Phoenix.Component.

Note

This module may be injected as the core components module depending on the Aurora UIX template configuration. Dynamic selection and import of the core components module is handled via use Aurora.Uix.CoreComponentsImporter, which will import either this module or a custom one as configured in your application or template.

Summary

Functions

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

Hides a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

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

Shows a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

translate_error(arg)

Translates an error message using gettext.

translate_errors(errors, field)

Translates the errors for a field from a keyword list of errors.

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

Hides an element by adding classes for a transition animation.

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

Shows an element by adding classes for a transition animation.

Functions

components_override()

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

@spec hide_modal(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Hides a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

Examples

<button phx-click={hide_modal("confirm-modal")}>Close modal</button>

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

@spec show_modal(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Shows a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

Examples

<button phx-click={show_modal("confirm-modal")}>Open modal</button>

translate_error(arg)

@spec translate_error(tuple()) :: binary()

Translates an error message using gettext.

translate_errors(errors, field)

@spec translate_errors(
  list(),
  keyword()
) :: list()

Translates the errors for a field from a keyword list of errors.

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

@spec uix_hide(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Hides an element by adding classes for a transition animation.

Examples

<button phx-click={hide("#my-element")}>Hide</button>

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

@spec uix_show(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Shows an element by adding classes for a transition animation.

Examples

<button phx-click={show("#my-element")}>Show</button>