Doggo Storybook 0.10.4-34-g3a480e9

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.

 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.
title :string

The page title. Will be set as h1.
action :slot

Slot for action buttons right of the title.
Show slot attributes Hide slot attributes
Required label * :string
Required on_click * :any

Event name or Phoenix.LiveView.JS command.

 
<: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.
Show slot attributes Hide slot attributes
Required label * :string
Required on_click * :any

Event name or Phoenix.LiveView.JS command.

 
<: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>