تخطي إلى المحتوى

قائمة البيانات · البنية

قائمة عناصر بسيطة، فتحات تسمية/محتوى يدوية، فتحات مخصّصة، وحالة فارغة.

الحد الأدنى

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"}
    ])
  }
/>

فتحات يدوية

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>

فتحات مخصصة

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>

فارغ

No entries

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