Doggo Storybook 0.9.0

App Bar

The app bar is typically located at the top of the interface and provides access to key features and navigation options.

Read more Read less

Usage

<.app_bar title="Page title">
  <:navigation label="Open menu" on_click={JS.push("toggle-menu")}>
    <.icon><Lucideicons.menu aria-hidden /></.icon>
  </:navigation>
  <:action label="Search" on_click={JS.push("search")}>
    <.icon><Lucideicons.search aria-hidden /></.icon>
  </:action>
  <:action label="Like" on_click={JS.push("like")}>
    <.icon><Lucideicons.heart aria-hidden /></.icon>
  </:action>
</.app_bar>

Page title

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. []
rest :global Any additional HTML attributes.
title :string The page title. Will be set as `h1`.
action :slot Slot for action buttons right of the title. 
<:action label="Search" on_click={JS.push("search")}>
  <.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-search"
  aria-hidden="true"
>
  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
</svg>
</.icon>
</:action>
<:action label="Like" on_click={JS.push("like")}>
  <.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-heart"
  aria-hidden="true"
>
  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
</svg>
</.icon>
</:action>
navigation :slot Slot for a single button left of the title, typically used for a menu button that toggles a drawer, or for a back link. 
<:navigation label="Open menu" on_click={JS.push("toggle-menu")}>
  <.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-menu"
  aria-hidden="true"
>
  <line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line
    x1="4"
    x2="20"
    y1="18"
    y2="18"
  />
</svg>
</.icon>
</:navigation>