- 1.4.1

Toolbar

Renders a container for a set of controls.

Read more Read less

Usage

Direct children of this component can be any types buttons or groups of buttons.

<.toolbar label="Actions for the dog">
  <div role="group">
    <button phx-click="feed-dog">
      <.icon text="Feed dog"><Icons.feed /></.icon>
    </button>
    <button phx-click="walk-dog">
      <.icon text="Walk dog"><Icons.walk /></.icon>
    </button>
  </div>
  <div role="group">
    <button phx-click="teach-trick">
      <.icon text="Teach a Trick"><Icons.teach /></.icon>
    </button>
    <button phx-click="groom-dog">
      <.icon text="Groom dog"><Icons.groom /></.icon>
    </button>
  </div>
</.toolbar>

This component needs the Doggo.Toolbar JavaScript hook. See Phoenix LiveView Hooks for registering it.

Keyboard

  • Left and Right - move between the controls, wrapping at the ends. A toolbar with orientation="vertical" uses Up and Down instead.
  • Home and End - first and last control.

The toolbar is a single tab stop. Tab moves to the control the user last used, and the arrow keys move between them.

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
controls :string

DOM ID of the element that is controlled by this toolbar. For example,

 Read more Read less

if the toolbar provides text formatting options for an editable content area, the values should be the ID of that content area.
Required id * :string

A unique DOM ID. Needed for the JavaScript hook.
label :string

A accessibility label for the toolbar. Set as aria-label attribute.

 Read more Read less

You should ensure that either the label or the labelledby attribute is set.

Do not repeat the word toolbar in the label. Screen readers announce the role along with the name. Using the role in the label would make screen readers repeat it.
labelledby :string

The DOM ID of an element that labels this tree.

 Read more Read less

Example:

Dogs

You should ensure that either the label or the labelledby attribute is set.
orientation :string

Sets aria-orientation and determines whether to use the left and right

 Read more Read less
"horizontal"

arrow keys or the up and down arrow keys to move between controls.
rest :global

Any additional HTML attributes.
Required inner_block * :slot

Place any number of buttons, groups of buttons, toggle buttons, menu buttons, or disclosure buttons here.

 
<div role="group">
  <.button phx-click="feed-dog">
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-cooking-pot"
>
  <path d="M2 12h20" /><path d="M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8" /><path d="m4 8 16-4" /><path d="m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8" />
</svg>

  </.button>
  <.button phx-click="walk-dog">
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-paw-print"
>
  <circle cx="11" cy="4" r="2" />
  <circle cx="18" cy="8" r="2" />
  <circle cx="20" cy="16" r="2" />
  <path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z" />
</svg>

  </.button>
</div>
<div role="group">
  <.button phx-click="teach-trick">
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-graduation-cap"
>
  <path d="M22 10v6M2 10l10-5 10 5-10 5z" /><path d="M6 12v5c3 3 9 3 12 0v-5" />
</svg>

  </.button>
  <.button phx-click="groom-dog">
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-scissors"
>
  <circle cx="6" cy="6" r="3" /><path d="M8.12 8.12 12 12" /><path d="M20 4 8.12 15.88" /><circle
    cx="6"
    cy="18"
    r="3"
  /><path d="M14.8 14.8 20 20" />
</svg>

  </.button>
</div>