PhoenixDuskmoon.Component.Skeleton (PhoenixDuskmoon v7.2.1)

View Source

Duskmoon UI Skeleton Component

Provides various skeleton loading placeholder formats using daisyui classes. Perfect for showing content placeholders while data is loading.

Summary

Functions

dm_skeleton(assigns)

Generates a basic skeleton element.

dm_skeleton_avatar(assigns)

Generates an avatar skeleton.

dm_skeleton_card(assigns)

Generates a card skeleton placeholder.

dm_skeleton_comment(assigns)

Generates a comment skeleton placeholder.

dm_skeleton_form(assigns)

Generates a form skeleton placeholder.

dm_skeleton_list(assigns)

Generates a list skeleton placeholder.

dm_skeleton_table(assigns)

Generates a table skeleton placeholder.

dm_skeleton_text(assigns)

Generates a text skeleton with multiple lines.

Functions

dm_skeleton(assigns)

Generates a basic skeleton element.

Examples

<.dm_skeleton />
<.dm_skeleton class="w-32 h-4" />
<.dm_skeleton variant="circle" size="md" />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • variant (:string) - Skeleton variant (default, circle, square, text, avatar). Defaults to nil.
  • size (:string) - Skeleton size (xs, sm, md, lg, xl). Defaults to nil.
  • animation (:string) - Animation type (pulse, wave, bounce). Defaults to nil.
  • width (:string) - Custom width (e.g., 'w-32', 'w-full'). Defaults to nil.
  • height (:string) - Custom height (e.g., 'h-4', 'h-8'). Defaults to nil.

dm_skeleton_avatar(assigns)

Generates an avatar skeleton.

Examples

<.dm_skeleton_avatar size="md" />
<.dm_skeleton_avatar size="lg" class="ring ring-primary" />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • size (:string) - Avatar size (xs, sm, md, lg, xl). Defaults to "md".
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_card(assigns)

Generates a card skeleton placeholder.

Examples

<.dm_skeleton_card />
<.dm_skeleton_card show_avatar={true} lines={4} />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • show_avatar (:boolean) - Show avatar skeleton. Defaults to false.
  • avatar_size (:string) - Avatar size. Defaults to "md".
  • lines (:integer) - Number of text lines. Defaults to 3.
  • show_action (:boolean) - Show action button skeleton. Defaults to false.
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_comment(assigns)

Generates a comment skeleton placeholder.

Examples

<.dm_skeleton_comment />
<.dm_skeleton_comment show_replies={2} />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • show_replies (:integer) - Number of reply skeletons to show. Defaults to 0.
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_form(assigns)

Generates a form skeleton placeholder.

Examples

<.dm_skeleton_form fields={4} show_submit={true} />
<.dm_skeleton_form fields={3} field_types={["text", "select", "textarea"]} />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • fields (:integer) - Number of form fields. Defaults to 4.
  • field_types (:list) - List of field types (text, select, textarea, checkbox). Defaults to nil.
  • show_submit (:boolean) - Show submit button skeleton. Defaults to true.
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_list(assigns)

Generates a list skeleton placeholder.

Examples

<.dm_skeleton_list items={5} show_avatar={true} />
<.dm_skeleton_list items={3} lines_per_item={2} />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • items (:integer) - Number of list items. Defaults to 5.
  • show_avatar (:boolean) - Show avatar for each item. Defaults to false.
  • avatar_size (:string) - Avatar size. Defaults to "sm".
  • lines_per_item (:integer) - Number of text lines per item. Defaults to 1.
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_table(assigns)

Generates a table skeleton placeholder.

Examples

<.dm_skeleton_table rows={5} columns={4} />
<.dm_skeleton_table rows={3} columns={2} show_header={true} />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • rows (:integer) - Number of table rows. Defaults to 5.
  • columns (:integer) - Number of table columns. Defaults to 4.
  • show_header (:boolean) - Show table header. Defaults to true.
  • animation (:string) - Animation type. Defaults to nil.

dm_skeleton_text(assigns)

Generates a text skeleton with multiple lines.

Examples

<.dm_skeleton_text lines={3} />
<.dm_skeleton_text lines={2} last_line_width="w-3/4" />

Attributes

  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • lines (:integer) - Number of skeleton lines. Defaults to 3.
  • line_height (:string) - Height of each line. Defaults to "h-4".
  • line_spacing (:string) - Spacing between lines. Defaults to "mb-2".
  • last_line_width (:string) - Width of the last line. Defaults to "w-full".
  • animation (:string) - Animation type. Defaults to nil.