Doggo Storybook 0.10.4-58-gbc96e61

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 label="Feed dog"><Icons.feed /></.icon>
    </button>
    <button phx-click="walk-dog">
      <.icon label="Walk dog"><Icons.walk /></.icon>
    </button>
  </div>
  <div role="group">
    <button phx-click="teach-trick">
      <.icon label="Teach a Trick"><Icons.teach /></.icon>
    </button>
    <button phx-click="groom-dog">
      <.icon label="Groom dog"><Icons.groom /></.icon>
    </button>
  </div>
</.toolbar>
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.
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, since it is already announced by screen readers.
labelledby :string

The DOM ID of an element that labels this tree.

 Read more Read less

Example:

<h3 id="dog-toolbar-label">Dogs</h3>
<Doggo.toolbar labelledby="dog-toolbar-label"></Doggo.toolbar>

You should ensure that either the label or the labelledby attribute is set.
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">
    <.icon><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>
</.icon>
  </.button>
  <.button phx-click="walk-dog">
    <.icon><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>
</.icon>
  </.button>
</div>
<div role="group">
  <.button phx-click="teach-trick">
    <.icon><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>
</.icon>
  </.button>
  <.button phx-click="groom-dog">
    <.icon><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>
</.icon>
  </.button>
</div>