Doggo Storybook 0.10.2

Action Bar

The action bar offers users quick access to primary actions within the application.

Read more Read less

It is typically positioned to float above other content.

Usage

<.action_bar>
  <:item label="Edit" on_click={JS.push("edit")}>
    <.icon><Lucideicons.pencil aria-hidden /></.icon>
  </:item>
  <:item label="Move" on_click={JS.push("move")}>
    <.icon><Lucideicons.move aria-hidden /></.icon>
  </:item>
  <:item label="Archive" on_click={JS.push("archive")}>
    <.icon><Lucideicons.archive aria-hidden /></.icon>
  </:item>
</.action_bar>
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.
rest :global

Any additional HTML attributes.
Required item * :slot
Show slot attributes Hide slot attributes
Required label * :string
Required on_click * %JS{} 
<:item label="Edit" on_click={JS.push("edit")}>
  <.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-pencil"
  aria-hidden="true"
>
  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" />
</svg>
</.icon>
</:item>
<:item label="Move" on_click={JS.push("move")}>
  <.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-move-right"
  aria-hidden="true"
>
  <path d="M18 8L22 12L18 16" /><path d="M2 12H22" />
</svg>
</.icon>
</:item>
<:item label="Archive" on_click={JS.push("archive")}>
  <.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-archive"
  aria-hidden="true"
>
  <rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />
</svg>
</.icon>
</:item>