Astral.Components (Astral v0.2.2)

Built-in Astral HEEx components available to pages, layouts, and Markdown.

Summary

Functions

figure(assigns)

Render an optimized image wrapped in a semantic figure.

image(assigns)

Render an optimized build-time image.

island(assigns)

Render a client-side island mounted by Volt-managed framework code.

picture(assigns)

Render optimized responsive image sources with a fallback image.

react(assigns)

Render a React client-side island.

solid(assigns)

Render a Solid client-side island.

svelte(assigns)

Render a Svelte client-side island.

svg(assigns)

Render an inline SVG file resolved through Volt asset semantics.

vue(assigns)

Render a Vue client-side island.

Functions

figure(assigns)

Render an optimized image wrapped in a semantic figure.

Attributes

src (:any) (required)
alt (:string) (required)
caption (:any) - Defaults to nil.
width (:any) - Defaults to nil.
height (:any) - Defaults to nil.
format (:any) - Defaults to nil.
quality (:integer) - Defaults to nil.
fit (:atom) - Defaults to :contain.
loading (:string) - Defaults to "lazy".
decoding (:string) - Defaults to "async".
image_attrs (:map) - Defaults to %{}.
Global attributes are accepted.

Slots

inner_block

image(assigns)

Render an optimized build-time image.

Attributes

src (:any) (required)
alt (:string) (required)
width (:any) - Defaults to nil.
height (:any) - Defaults to nil.
format (:any) - Defaults to nil.
quality (:integer) - Defaults to nil.
fit (:atom) - Defaults to :contain.
loading (:string) - Defaults to "lazy".
decoding (:string) - Defaults to "async".
Global attributes are accepted.

island(assigns)

Render a client-side island mounted by Volt-managed framework code.

Attributes

component (:string) (required)
adapter (:atom) (required)
client (:atom) - Defaults to :load.
media (:string) - Defaults to nil.
props (:any) - Defaults to %{}.
id (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block

picture(assigns)

Render optimized responsive image sources with a fallback image.

Attributes

src (:any) (required)
alt (:string) (required)
width (:any) - Defaults to nil.
height (:any) - Defaults to nil.
widths (:list) - Defaults to nil.
formats (:list) - Defaults to nil.
fallback_format (:any) - Defaults to nil.
quality (:integer) - Defaults to nil.
fit (:atom) - Defaults to :contain.
sizes (:string) - Defaults to nil.
loading (:string) - Defaults to "lazy".
decoding (:string) - Defaults to "async".
picture_attrs (:map) - Defaults to %{}.
Global attributes are accepted.

react(assigns)

Render a React client-side island.

Attributes

component (:string) (required)
client (:atom) - Defaults to :load.
media (:string) - Defaults to nil.
props (:any) - Defaults to %{}.
id (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block

solid(assigns)

Render a Solid client-side island.

Attributes

component (:string) (required)
client (:atom) - Defaults to :load.
media (:string) - Defaults to nil.
props (:any) - Defaults to %{}.
id (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block

svelte(assigns)

Render a Svelte client-side island.

Attributes

component (:string) (required)
client (:atom) - Defaults to :load.
media (:string) - Defaults to nil.
props (:any) - Defaults to %{}.
id (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block

svg(assigns)

Render an inline SVG file resolved through Volt asset semantics.

Attributes

src (:string) (required)
Global attributes are accepted.

vue(assigns)

Render a Vue client-side island.

Attributes

component (:string) (required)
client (:atom) - Defaults to :load.
media (:string) - Defaults to nil.
props (:any) - Defaults to %{}.
id (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block