Skip to content

Data List · Anatomy

Minimal items list, manual label/content slots, custom slots, and empty state.

Minimal

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.data_list
  class="data-list"
  items={
    Corex.Content.new([
      %{label: "Name", content: "Marie Curie"},
      %{label: "Field", content: "Physics"},
      %{label: "Born", content: "1867"}
    ])
  }
/>

Manual slots

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.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

Lorem ipsum dolor sit amet: Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Duis dictum gravida odio ac pharetra?: Nullam eget vestibulum ligula, at interdum tellus.
Donec condimentum ex mi: Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.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

No entries

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