BitstylesPhoenix.Component.DescriptionList (bitstyles_phoenix v2.2.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 the dd tag. See BitstylesPhoenix.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 the dl tag. See BitstylesPhoenix.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 tags ui_dt/1 with the contents of the attribute and ui_dd/1 with the inner contents of the component. If you need to set more custom content on the ui_dt/1 you can omit this attribute, and provide ui_dt/1 and ui_dd/1 yourself in the inner conten.
  • value - If label is set, a value can be specified instead of using the inner content of the component.
  • class - Extra classes to pass to the div tag. See BitstylesPhoenix.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 the dt tag. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • All other attributes are passed to the dt tag.