BitstylesPhoenix.Component.DescriptionList (bitstyles_phoenix v2.3.0) View Source
The description list components.
With items (short-cut form)
iex> assigns = %{}
...> render ~H"""
...> <.ui_dl>
...> <.ui_dl_item label="Length" value="8" />
...> <.ui_dl_item label="Inserted at">2007-01-02</.ui_dl_item>
...> </.ui_dl>
...> """
"""
<dl class="a-dl">
<div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
<dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
Length
</dt>
<dd class="u-col-span-2">
8
</dd>
</div>
<div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
<dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
Inserted at
</dt>
<dd class="u-col-span-2">
2007-01-02
</dd>
</div>
</dl>
"""
With items (short-cut and long form) and extra attributes
iex> assigns = %{}
...> render ~H"""
...> <.ui_dl class="extra" data-foo="baz">
...> <.ui_dl_item label="Length" class="u-fg-brand-2">8</.ui_dl_item>
...> <.ui_dl_item>
...> <.ui_dt class="u-fg-brand-1" data-foo="bar">Some</.ui_dt>
...> <.ui_dd class="u-fg-brand-1" data-foo="bar">Tag</.ui_dd>
...> </.ui_dl_item>
...> <.ui_dl_item>
...> <.ui_dt><pre>Tag</pre></.ui_dt>
...> <.ui_dd>Value</.ui_dd>
...> </.ui_dl_item>
...> </.ui_dl>
...> """
"""
<dl class="a-dl extra" data-foo="baz">
<div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
<dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
Length
</dt>
<dd class="u-col-span-2">
8
</dd>
</div>
<div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
<dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
Some
</dt>
<dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
Tag
</dd>
</div>
<div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-m u-padding-m-y u-padding-m@m u-items-baseline">
<dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
<pre>
Tag
</pre>
</dt>
<dd class="u-col-span-2">
Value
</dd>
</div>
</dl>
"""
Link to this section Summary
Functions
Render a dd tag for usage with ui_dl_item/1
.
Render a description list.
Render a description list item.
Render a dt tag for usage with ui_dl_item/1
.
Link to this section Functions
Render a dd tag for usage with ui_dl_item/1
.
Attributes
class
- Extra classes to pass to thedd
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
dd
tag.
Render a description list.
Attributes
class
- Extra classes to pass to thedl
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
dl
tag.
See bitstyles description list docs for examples.
Render a description list item.
Attributes
label
- If set renders two tagsui_dt/1
with the contents of the attribute andui_dd/1
with the inner contents of the component. If you need to set more custom content on theui_dt/1
you can omit this attribute, and provideui_dt/1
andui_dd/1
yourself in the inner conten.value
- Iflabel
is set, avalue
can be specified instead of using the inner content of the component.class
- Extra classes to pass to thediv
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
div
tag.
Render a dt tag for usage with ui_dl_item/1
.
Attributes
class
- Extra classes to pass to thedt
tag. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
dt
tag.