A component for displaying a list of key-value pairs.
Themed DataList component.
Examples
<.data_list>
<.data_list_item>
<:label>Status</:label>
<:value>
<.badge color="green">Active</.badge>
</:value>
</.data_list_item>
<.data_list_item>
<:label>ID</:label>
<:value>12345</:value>
</.data_list_item>
</.data_list>Props
DataList
size- "1", "2", "3" (default: "2")orientation- "horizontal", "vertical" (default: "horizontal")trim- "normal", "start", "end", "both"- Plus margin props
DataListItem
align- "start", "center", "end", "baseline", "stretch" (default: "baseline")
Summary
Functions
DataList root component.
Attributes
size(:string) - Defaults to"2". Must be one of"1","2", or"3".orientation(:string) - Defaults to"horizontal". Must be one of"horizontal", or"vertical".trim(:string) - Must be one of"normal","start","end", or"both".class(:string) - Defaults tonil.style(:string) - Defaults tonil.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.- Global attributes are accepted.
Slots
inner_block(required)
Individual item within DataList.
Attributes
align(:string) - Defaults to"baseline". Must be one of"start","center","end","baseline", or"stretch".class(:string) - Defaults tonil.style(:string) - Defaults tonil.- Global attributes are accepted.
Slots
label(required)value(required)