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.
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-10
resulting inu-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 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-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>
"""