PhiaUi.Components.Comment (phia_ui v0.1.17)

Copy Markdown View Source

Blog-style comment with avatar, author, date, body, actions, and nested replies.

Supports threaded conversations with configurable nesting depth via the :depth attribute. Indentation is capped at :max_depth to prevent deeply-nested threads from becoming unreadable.

Examples

<.comment_list>
  <.comment author="Jane" date="2 hours ago">
    Great article! Really enjoyed it.
    <:actions>
      <button>Reply</button>
      <button>Like</button>
    </:actions>
    <:replies>
      <.comment author="John" date="1 hour ago" depth={1}>
        Thanks! Glad you liked it.
      </.comment>
    </:replies>
  </.comment>
</.comment_list>

With avatar

<.comment author="Alice" avatar_src="/images/alice.jpg" avatar_fallback="A" date="Just now">
  Hello world!
</.comment>

Nesting

Each level of :depth adds left padding and a border-left indicator. Depths beyond :max_depth (default 4) are clamped to prevent excessive indentation.

Summary

Functions

comment(assigns)

Renders a single comment with optional avatar, actions, and nested replies.

comment_list(assigns)

Renders a container for a list of threaded comments.

Functions

comment(assigns)

Renders a single comment with optional avatar, actions, and nested replies.

Attributes

  • author (:string) (required) - Author display name.
  • avatar_src (:string) - Avatar image URL. Defaults to nil.
  • avatar_fallback (:string) - Fallback initials when no avatar image. Defaults to nil.
  • date (:string) - Human-readable date string. Defaults to nil.
  • depth (:integer) - Nesting depth (controls left indent). Defaults to 0.
  • max_depth (:integer) - Maximum indent depth. Defaults to 4.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block (required) - Comment body content.
  • actions - Reply, like, report buttons.
  • replies - Nested child comments.
  • header_extra - Badges, edited indicator, etc.

comment_list(assigns)

Renders a container for a list of threaded comments.

Attributes

  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the container.

Slots

  • inner_block (required) - Comment children.