Beacon.LiveAdmin.StationUI.HTML.Toolbar (Beacon LiveAdmin v0.4.0)

View Source

Summary

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 to nil.
  • 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

toolbar(assigns)

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)

toolbar_base_classes()

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>

toolbar_vertical(assigns)

Attributes

  • class (:string) - Defaults to nil.
  • 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)

toolbar_vertical_base_classes()