BitstylesPhoenix.Component.Heading.ui_page_title

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

Render a page header with a <h1> title and an optional title_extra and some action slots for that page (usually combined with buttons and dropdowns).

Attributes

  • class - Set CSS classes on the outer div.
  • 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.

See the page header docs for more examples and details.

Page title

iex> assigns = %{}
...> render ~H"""
...> <.ui_page_title>
...>   Title
...> </.ui_page_title>
...> """
"""
<div class="u-flex u-justify-between u-flex-wrap u-items-center">
  <div class="u-flex u-flex-wrap u-items-center">
    <h1 class="u-margin-m-right u-break-text">
      Title
    </h1>
  </div>
</div>
"""

Page title with actions and title extra

iex> assigns = %{}
...> render ~H"""
...> <.ui_page_title>
...>   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_page_title>
...> """
"""
<div class="u-flex u-justify-between u-flex-wrap u-items-center">
  <div class="u-flex u-flex-wrap u-items-center">
    <h1 class="u-margin-m-right u-break-text">
      Title
    </h1>
    <div class="u-flex-shrink-0 u-margin-m-bottom">
      <span class="a-badge u-h6 u-font-medium a-badge--gray">
        Published
      </span>
    </div>
  </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>
"""

Requires additional content on the page:

<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
  <symbol id="icon-caret-down" viewBox="0 0 100 100">
    <path d="M6.64,34.23a5.57,5.57,0,0,1,7.87-7.89L49.92,61.91,85.49,26.34a5.57,5.57,0,0,1,7.87,7.89L53.94,73.66a5.58,5.58,0,0,1-7.88,0Z" fill-rule="evenodd"/>
  </symbol>
</svg>