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: "Name", content: "Marie Curie"},
      %{label: "Field", content: "Physics"},
      %{label: "Born", content: "1867"}
    ])
  }
/>

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">Lorem ipsum dolor sit amet</:label>
  <:content value="lorem">Consectetur adipiscing elit.</:content>
  <:label value="duis">Duis dictum gravida odio ac pharetra?</:label>
  <:content value="duis">Nullam eget vestibulum ligula.</: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([
      %{value: "status", label: "Status", content: "Active", meta: %{color: "green"}},
      %{value: "role", label: "Role", content: "Admin", meta: %{color: "blue"}}
    ])
  }
>
  <:label :let={item}>{item.label}</:label>
  <:content :let={item}>{item.content}</: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 (stream-friendly).

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

Stream

Keep a plain list assign for items and update it alongside stream_insert/3 or stream/3 reset. Pass items={Corex.Content.new(@items_list)} to the component. Include <:empty> so an empty list shows the empty state without counting stream entries.

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"] {}