Astral.Components (Astral v0.1.2)

Copy Markdown View Source

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.

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.

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.

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.

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.

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.