Beacon.LiveAdmin.StationUI.HTML.Toolbar (Beacon LiveAdmin v0.4.0)
View SourceSummary
Functions
Attributes
class
(:string
) - Defaults to"border text-sm [&_span]:size-8"
.- Global attributes are accepted.
Slots
toolbar_item
(required) - Accepts attributes:class
(:string
)icon_name
(:string
)text
(:string
) (required)
Sets up Toolbar component. The Toolbar includes default and vertical variants
Attributes
class
(:string
) - Defaults tonil
.alt_name
(:string
) (required)image_src
(:string
) - Defaults to""
.- Global attributes are accepted.
Slots
toolbar_item
(required) - Accepts attributes:class
(:string
)icon_name
(:string
)text
(:string
) (required)
Functions
Attributes
class
(:string
) - Defaults to"border text-sm [&_span]:size-8"
.- Global attributes are accepted.
Slots
toolbar_item
(required) - Accepts attributes:class
(:string
)icon_name
(:string
)text
(:string
) (required)
Sets up Toolbar component. The Toolbar includes default and vertical variants
Default Toolbar Example
<.toolbar>
<:toolbar_item icon_name="hero-face-smile-solid" text="Label" />
...
</.toolbar>
Default Toolbar w/o border Example
<.toolbar class="border-0">
<:toolbar_item icon_name="hero-face-smile-solid" text="Label" />
...
</.toolbar>
Vertical Toolbar Example
<.toolbar_vertical image_src={~p"/images/narwin_logo.png"} alt_name="brand logo">
<:toolbar_item icon_name="hero-face-smile" text="Label" />
...
</.toolbar_vertical>
Suggested size classes:
Because of the nested <.button> and <.icon> components, the Toolbar's parent container will handle the bulk of styling. We can use the parent to modify the size of the nested elements.
### Default Toolbar Sizes:
We can use the arbitrary class [&_span] to target the icon styles.
xl: text-base [&_span]:size-12 lg: text-sm [&_span]:size-[38px] sm: text-xs [&_span]:size-6
### Example
<.toolbar class="text-base [&_span]:size-12">
...
</.toolbar>
### Default Vertical Toolbar Sizes:
We can use the arbitrary selectors [&_div] to target the logo size & [&_span] to target the icon styles.
xl: [&_div]:size-[72px] [&_span]:size-7 lg: [&_div]:size-[62px] [&_span]:size-4.5 sm: [&_div]:size-11 [&_span]:size-3.5
### Example
<.toolbar_vertical ... class="[&_div]:size-[72px] [&_span]:size-7">
...
</.toolbar_vertical>
Attributes
class
(:string
) - Defaults tonil
.alt_name
(:string
) (required)image_src
(:string
) - Defaults to""
.- Global attributes are accepted.
Slots
toolbar_item
(required) - Accepts attributes:class
(:string
)icon_name
(:string
)text
(:string
) (required)