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>