Phoenix component for rendering semantic data lists.

Anatomy

Minimal

Pass a list of %Corex.Content.Item{} structs via Corex.Content.new/1.

<.data_list
  class="data-list"
  items={
    Corex.Content.new([
      %{
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus."
      },
      %{
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus."
      }
    ])
  }
/>

Manual slots

With an empty items list, use :label and :content slots with a matching value on each pair.

<.data_list class="data-list">
  <:label value="lorem">
    <.heroicon name="hero-chat-bubble-left-right" /> Lorem ipsum dolor sit amet
  </:label>
  <:content value="lorem">
    <p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p>
  </:content>
  <:label value="duis">
    <.heroicon name="hero-device-phone-mobile" /> Duis dictum gravida odio ac pharetra?
  </:label>
  <:content value="duis">
    <p>Nullam eget vestibulum ligula, at interdum tellus.</p>
  </:content>
  <:label value="donec">
    <.heroicon name="hero-phone" /> Donec condimentum ex mi
  </:label>
  <:content value="donec">
    <p>Congue molestie ipsum gravida a. Sed ac eros luctus.</p>
  </:content>
</.data_list>

Custom slots

Combine items with :label and :content slots using :let={item} for custom markup.

<.data_list
  class="data-list"
  items={
    Corex.Content.new([
      %{
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.",
        meta: %{icon: "hero-chat-bubble-left-right"}
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus.",
        meta: %{icon: "hero-device-phone-mobile"}
      },
      %{
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus.",
        meta: %{icon: "hero-phone"}
      }
    ])
  }
>
  <:label :let={item}>
    <.heroicon name={item.meta.icon} /> {item.label}
  </:label>
  <:content :let={item}>
    <p>{item.content}</p>
  </:content>
</.data_list>

Empty

Optional <:empty> when there are no rows. The empty block renders beside the <dl> (not inside it) and is hidden by CSS when items exist.

<.data_list class="data-list" items={[]}>
  <:empty>No entries</:empty>
</.data_list>

Dynamic items

Grow or shrink rows at runtime by updating a list assign and passing items={Corex.Content.new(@items)}. Include <:empty> so an empty list shows the empty state. Data list is not a LiveView stream consumer; use Phoenix.LiveView.stream/3 only with components that render @streams.* (for example data_table).

Style

[data-scope="data-list"][data-part="root"] {}
[data-scope="data-list"][data-part="item"] {}
[data-scope="data-list"][data-part="label"] {}
[data-scope="data-list"][data-part="content"] {}
[data-scope="data-list"][data-part="empty"] {}

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Size (ui-size-sm … ui-size-xl), Radius (ui-rounded-*). No variant axis. See the modifier guide.