Function components for the basic catalog (v0.9.1 and v1.0): Text,
Image, Icon, Video, AudioPlayer, Row, Column, List,
Card, Tabs, Modal, Divider, Button, TextField, CheckBox,
ChoicePicker, Slider and DateTimeInput.
Every element carries a namespaced class: the component's
(a2ui-button), its variant (a2ui-button-primary) and its parts
(a2ui-tabs-tab), as in the reference web renderers. States are ARIA
attributes (aria-selected, aria-pressed, aria-invalid), and the
input components share one anatomy: an a2ui-field with an
a2ui-field-label, the control and the a2ui-field-errors of its failed
checks, marked data-a2ui-empty while it holds no value.
priv/static/a2ui_phoenix.css styles them all from --a2ui-* tokens.
Inputs are named with A2UIPhoenix.Context.input_name/2 and report
changes through the surface's form; buttons, tabs, modals and chips send
click events to the surface (A2UIPhoenix.Surface). Interactive elements
use native controls and, where the control alone does not say it, the
ARIA role from A2UICore.Accessibility (a radiogroup for a
single-choice picker).
components/0 is the component map A2UIPhoenix.Surface starts from;
a host overrides or extends it with its own %{type => component}.
Summary
Functions
AudioPlayer.
Button: invokes its action; disabled while its checks fail.
Card.
CheckBox.
ChoicePicker: radio buttons, checkboxes or chips over options,
optionally with a filter.
Column: children stacked.
The basic catalog's components by type.
DateTimeInput: a date input, a time input, or both.
Divider.
Icon: a Material Symbols ligature, or an SVG path ({svgPath}).
The Material Symbols ligature of a catalog icon name.
Image.
List: children in a scrolling list.
Modal: the trigger, and the content in a dialog while it is open. A
click on the trigger opens it — also when the trigger is a button with
an action of its own.
Row: children side by side.
Slider: a range input showing its value.
Tabs: a tab bar and the open tab's content.
Text: a heading (v0.9 h1–h5), a caption, or body text.
TextField: a text, number, password or multi-line input.
Video.
Functions
@spec audio_player(map()) :: Phoenix.LiveView.Rendered.t()
AudioPlayer.
@spec button(map()) :: Phoenix.LiveView.Rendered.t()
Button: invokes its action; disabled while its checks fail.
@spec card(map()) :: Phoenix.LiveView.Rendered.t()
Card.
@spec check_box(map()) :: Phoenix.LiveView.Rendered.t()
CheckBox.
@spec choice_picker(map()) :: Phoenix.LiveView.Rendered.t()
ChoicePicker: radio buttons, checkboxes or chips over options,
optionally with a filter.
@spec column(map()) :: Phoenix.LiveView.Rendered.t()
Column: children stacked.
@spec components() :: %{ required(String.t()) => (map() -> Phoenix.LiveView.Rendered.t()) }
The basic catalog's components by type.
@spec date_time_input(map()) :: Phoenix.LiveView.Rendered.t()
DateTimeInput: a date input, a time input, or both.
@spec divider(map()) :: Phoenix.LiveView.Rendered.t()
Divider.
@spec icon(map()) :: Phoenix.LiveView.Rendered.t()
Icon: a Material Symbols ligature, or an SVG path ({svgPath}).
The Material Symbols ligature of a catalog icon name.
iex> A2UIPhoenix.Components.Basic.icon_name("arrowBack")
"arrow_back"
iex> A2UIPhoenix.Components.Basic.icon_name("play")
"play_arrow"@spec image(map()) :: Phoenix.LiveView.Rendered.t()
Image.
@spec list(map()) :: Phoenix.LiveView.Rendered.t()
List: children in a scrolling list.
@spec modal(map()) :: Phoenix.LiveView.Rendered.t()
Modal: the trigger, and the content in a dialog while it is open. A
click on the trigger opens it — also when the trigger is a button with
an action of its own.
@spec row(map()) :: Phoenix.LiveView.Rendered.t()
Row: children side by side.
@spec slider(map()) :: Phoenix.LiveView.Rendered.t()
Slider: a range input showing its value.
@spec tabs(map()) :: Phoenix.LiveView.Rendered.t()
Tabs: a tab bar and the open tab's content.
@spec text_component(map()) :: Phoenix.LiveView.Rendered.t()
Text: a heading (v0.9 h1–h5), a caption, or body text.
@spec text_field(map()) :: Phoenix.LiveView.Rendered.t()
TextField: a text, number, password or multi-line input.
@spec video(map()) :: Phoenix.LiveView.Rendered.t()
Video.