Doggo Storybook 0.9.0

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. 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, 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. 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. Example: ```html <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>