BitstylesPhoenix.Component.Heading.ui_section_title

You're seeing just the function ui_section_title, go back to BitstylesPhoenix.Component.Heading module for more information.
Link to this function

ui_section_title(assigns)

View Source

Render a section header with optional actions and title_extra.

Attributes

  • class - Set CSS classes on the outer div.
  • border - Controls the bottom border and padding (default: true, boolean)
  • border_color - The border color, defaults to gray-10 resulting in u-border-gray-10-bottom.
  • tag - the heading tag (defaults to h3)
  • heading_class - Extra classes on the heading
  • All other attributes are passed to the outer div tag.

Attributes - title_extra slot

  • class - Set CSS classes on the surrounding div.
  • All other attributes are passed to the outer div tag.

Attributes - action slots

  • class - Set CSS classes on the surrounding li.
  • show - If the action should be rendered. Defaults to true.
  • All other attributes are passed to the outer li tag.

    Section title with default border

iex> assigns = %{}
...> render ~H"""
...> <.ui_section_title>
...>   Section title
...> </.ui_section_title>
...> """
"""
<div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-10-bottom">
  <div class="u-flex u-items-center">
    <h3 class="u-margin-0 u-margin-m-right u-break-text">
      Section title
    </h3>
  </div>
</div>
"""

Section title without border and h2

iex> assigns = %{}
...> render ~H"""
...> <.ui_section_title border={false} tag={:h2}>
...>   Section title
...> </.ui_section_title>
...> """
"""
<div class="u-flex u-flex-wrap u-items-center u-justify-between">
  <div class="u-flex u-items-center">
    <h2 class="u-margin-0 u-margin-m-right u-break-text">
      Section title
    </h2>
  </div>
</div>
"""

Section title with actions and title extra and different border

iex> assigns = %{}
...> render ~H"""
...> <.ui_section_title border_color="gray-70" heading_class="extra">
...>   Section title
...>   <:title_extra>
...>     <.ui_badge>Published</.ui_badge>
...>   </:title_extra>
...>   <:action>
...>     <.ui_button>Edit</.ui_button>
...>   </:action>
...>   <:action>
...>     <.ui_button variant="danger">Delete</.ui_button>
...>   </:action>
...>   <:action show={false}>
...>     <.ui_button variant="danger">Hide me</.ui_button>
...>   </:action>
...> </.ui_section_title>
...> """
"""
<div class="u-flex u-flex-wrap u-items-center u-justify-between u-padding-m-bottom u-border-gray-70-bottom">
  <div class="u-flex u-items-center">
    <h3 class="u-margin-0 u-margin-m-right u-break-text extra">
      Section title
    </h3>
    <span class="a-badge u-h6 u-font-medium a-badge--gray">
      Published
    </span>
  </div>
  <ul class="a-list-reset u-flex u-flex-wrap">
    <li class="u-margin-s-right u-margin-m-bottom">
      <button type="button" class="a-button">
        Edit
      </button>
    </li>
    <li class="u-margin-s-right u-margin-m-bottom">
      <button type="button" class="a-button a-button--danger">
        Delete
      </button>
    </li>
  </ul>
</div>
"""