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 surroundingli
.show
- If the action should be rendered. Defaults totrue
.- 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>