- 1.4.1

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>

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

Keyboard

  • Left and Right - move between the buttons, wrapping at the ends.
  • Home and End - first and last button.
  • Enter or Space - run the focused button's on_click.

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

Default
Open in playground 
<.action_bar id="action-bar-single-default">
  <:item label="Edit" on_click={JS.push("edit")}>
    <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>
  </:item>
  <:item label="Move" on_click={JS.push("move")}>
    <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>
  </:item>
  <:item label="Archive" on_click={JS.push("archive")}>
    <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>
  </:item>
</.action_bar>