View Source BitstylesPhoenix.Component.Heading (bitstyles_phoenix v2.4.0)
Components for building headings.
Summary
Functions
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).
Render a section header with optional action
s and title_extra
.
Functions
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 color="danger">Delete</.ui_button>
...> </:action>
...> <:action show={false}>
...> <.ui_button color="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--text">
Published
</span>
</div>
</div>
<ul class="u-list-none 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>
Render a section header with optional action
s 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 togray-light
resulting inu-border-gray-light-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 surroundingli
.show
- If the action should be rendered. Defaults totrue
.- 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-light-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-light" heading_class="extra">
...> Section title
...> <:title_extra>
...> <.ui_badge>Published</.ui_badge>
...> </:title_extra>
...> <:action>
...> <.ui_button>Edit</.ui_button>
...> </:action>
...> <:action>
...> <.ui_button color="danger">Delete</.ui_button>
...> </:action>
...> <:action show={false}>
...> <.ui_button color="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-light-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--text">
Published
</span>
</div>
<ul class="u-list-none 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>
"""