Renders a semantic data list.

Examples

Basic

Pass items directly as slots. The :item slot requires a title attribute; the inner block renders as the value.

<.data_list>
  <:item title="Name">Marie Curie</:item>
  <:item title="Field">Physics</:item>
  <:item title="Born">1867</:item>
</.data_list>

Items List

Pass a list of %Corex.Item{} structs. The component renders title and value using the default dt/dd structure.

<.data_list items={Corex.Item.new([
  %{title: "Name", value: "Marie Curie"},
  %{title: "Field", value: "Physics"},
  %{title: "Born", value: "1867"}
])} />

Custom Items

Combine both slots for full control over the content, while the component still owns the dt/dd structure and data-scope attributes.

<.data_list items={Corex.Item.new([
  %{title: "Status", value: "Active", meta: %{color: "green", icon: "hero-check"}},
  %{title: "Role", value: "Admin", meta: %{color: "blue", icon: "hero-shield-check"}}
])}>
  <:title :let={item}>
    <.icon name={item.meta.icon} />{item.title}
  </:title>
  <:value :let={item}>
    <.badge color={item.meta.color}>{item.value}</.badge>
  </:value>
</.data_list>

Attributes

• items (:list) - List of %Corex.Item{} structs for the items API. Defaults to nil.
• orientation (:string) - Layout orientation of items. Defaults to "vertical". Must be one of "vertical", or "horizontal".
• dir (:string) - Text direction. Defaults to "ltr". Must be one of "ltr", or "rtl".
• Global attributes are accepted. Additional HTML attributes for the root element.

Slots

• item - Slot API: each item with a required title attr and inner block as value. Accepts attributes:
  • title (:string) (required)
  • class (:string)
• title - Items API: customize the title content. Use :let={item} to access the %Corex.Item{} struct.
• value - Items API: customize the value content. Use :let={item} to access the %Corex.Item{} struct.