View Source Doggo (Doggo v0.5.0)

<Doggo.accordion id="dog-breeds">
  <:section title="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:section>
  <:section title="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:section>
  <:section title="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:section>
</Doggo.accordion>

Attributes

id (:string) (required)
expanded (:atom) - Defines how the accordion sections are initialized.
- :all - All accordion sections are expanded by default.
- :none - All accordion sections are hidden by default.
- :first - Only the first accordion section is expanded by default.
Defaults to :all.
heading (:string) - The heading level for the section title (trigger). Defaults to "h3".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

section (required) - Accepts attributes:
- title (:string)

action_bar(assigns)

(since 0.1.0)

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

It is typically positioned to float above other content.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Roving tabindex
Move focus with arrow keys

Example

<Doggo.action_bar>
  <:item label="Edit" on_click={JS.push("edit")}>
    <Doggo.icon size={:small}><Lucideicons.pencil aria-hidden /></Doggo.icon>
  </:item>
  <:item label="Move" on_click={JS.push("move")}>
    <Doggo.icon size={:small}><Lucideicons.move aria-hidden /></Doggo.icon>
  </:item>
  <:item label="Archive" on_click={JS.push("archive")}>
    <Doggo.icon size={:small}><Lucideicons.archive aria-hidden /></Doggo.icon>
  </:item>
</Doggo.action_bar>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- label (:string) (required)
- on_click (Phoenix.LiveView.JS) (required)

alert(assigns)

(since 0.1.0)

The alert component serves as a notification mechanism to provide feedback to the user.

For supplementary information that doesn't require the user's immediate attention, use callout/1 instead.

Examples

Minimal example:

<Doggo.alert id="some-alert"></Doggo.alert>

With title, icon and level:

<Doggo.alert id="some-alert" level={:info} title="Info">
  message
  <:icon><Heroicon.light_bulb /></:icon>
</Doggo.alert>

Attributes

id (:string) (required)
level (:atom) - Semantic level of the alert. Defaults to :info.
title (:string) - An optional title. Defaults to nil.
on_close (:any) - JS command to run when the close button is clicked. If not set, no close button is rendered.
Defaults to nil.
close_label (:any) - This value will be used as aria label. Consider overriding it in case your app is served in different languages.
Defaults to "close".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required) - The main content of the alert.
icon - Optional slot to render an icon.

alert_dialog(assigns)

(since 0.5.0)

Renders an alert dialog that requires the immediate attention and response of the user.

This component is meant for situations where critical information must be conveyed, and an explicit response is required from the user. It is typically used for confirmation dialogs, warning messages, error notifications, and other scenarios where an immediate decision is necessary.

For non-critical dialogs, such as those containing forms or additional information, use Doggo.modal/1 instead.

Usage

<Doggo.alert_dialog id="end-session-modal">
  <:title>End Training Session Early?</:title>
  <p>
    Are you sure you want to end the current training session with Bella?
    She's making great progress today!
  </p>
  <:footer>
    <Doggo.button phx-click="end-session">
      Yes, end session
    </Doggo.button>
    <Doggo.button phx-click={JS.exec("data-cancel", to: "#end-session-modal")}>
      No, continue training
    </Doggo.button>
  </:footer>
</Doggo.alert_dialog>

To open the dialog, use the show_modal/1 function.

<Doggo.button
  phx-click={Doggo.show_modal("end-session-modal")}
  aria-haspopup="dialog"
>
  show
</Doggo.button>

CSS

To hide the modal when the open attribute is not set, use the following CSS styles:

dialog.alert-dialog:not([open]),
dialog.alert-dialog[open="false"] {
  display: none;
}

Semantics

While the showModal() JavaScript function is typically recommended for managing modal dialog semantics, this component utilizes the open attribute to control visibility. This approach is chosen to eliminate the need for library consumers to add additional JavaScript code. To ensure proper modal semantics, the aria-modal attribute is added to the dialog element.

Attributes

id (:string) (required)
open (:boolean) - Initializes the dialog as open. Defaults to false.
on_cancel (Phoenix.LiveView.JS) - An additional Phoenix.LiveView.JS command to execute when the dialog is canceled. This command is executed in addition to closing the dialog. If you only want the dialog to be closed, you don't have to set this attribute.
Defaults to %Phoenix.LiveView.JS{ops: []}.
dismissable (:boolean) - When set to true, the dialog can be dismissed by clicking a close button or by pressing the escape key.
Defaults to false.
close_label (:string) - Aria label for the close button. Defaults to "Close".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

title (required)
inner_block (required) - The modal body.
close - The content for the 'close' link. Defaults to the word 'close'.
footer

avatar(assigns)

(since 0.3.0)

Renders profile picture, typically to represent a user.

Example

Minimal example with only the src attribute:

<Doggo.avatar src="avatar.png" />

Render avatar as a circle:

<Doggo.avatar src="avatar.png" circle />

Use a placeholder image in case the avatar is not set:

<Doggo.avatar src={@user.avatar_url} placeholder={{:src, "fallback.png"}} />

Render an text as the placeholder value:

<Doggo.avatar src={@user.avatar_url} placeholder="A" />

Attributes

src (:any) - The URL of the avatar image. If nil, the component will use the value provided in the placeholder attribute.
Defaults to nil.
placeholder (:any) - Fallback value to render in case the src attribute is nil.
- For a placeholder image, pass a tuple {:src, url}.
- For other types of placeholder content, such as text initials or inline SVG, pass the content directly. The component will render this content as-is.
If the placeholder value is set to nil, no avatar will be rendered if the src is nil.
Defaults to nil.
alt (:string) - Use alt text to identify the individual in an avatar if their name or identifier isn't otherwise provided in adjacent text. In contexts where the user's name or identifying information is already displayed alongside the avatar, use alt="" (the default) to avoid redundancy and treat the avatar as a decorative element for screen readers.
Defaults to "".
size (:atom) - Defaults to :normal.
circle (:boolean) - Defaults to false.
loading (:string) - Defaults to "lazy".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

badge(assigns)

(since 0.3.0)

Renders a badge, typically used for drawing attention to elements like notification counts.

Examples

<Doggo.badge>8</Doggo.badge>

Attributes

size (:atom) - Defaults to :normal.
variant (:atom) - Defaults to nil.

Slots

inner_block (required)

box(assigns)

(since 0.3.0)

Renders a box for a section on the page.

Example

Minimal example with only a box body:

<Doggo.box>
  <p>This is a box.</p>
</Doggo.box>

With title, banner, action, and footer:

<Doggo.box>
  <:title>Profile</:title>
  <:banner>
    <img src="banner-image.png" alt="" />
  </:banner>
  <:action>
    <Doggo.button_link patch={~p"/profiles/#{@profile}/edit"}>Edit</Doggo.button_link>
  </:action>

  <p>This is a profile.</p>

  <:footer>
    <p>Last edited: <%= @profile.updated_at %></p>
  </:footer>
</Doggo.box>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

title - The title for the box.
inner_block (required) - Slot for the content of the box body.
action - A slot for action buttons related to the box.
banner - A slot that can be used to render a banner image in the header.
footer - An optional slot for the footer.

callout(assigns)

(since 0.3.0)

Use the callout to highlight supplementary information related to the main content.

For information that needs immediate attention of the user, use alert/1 instead.

Example

Standard callout:

<Doggo.callout title="Dog Care Tip">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</Doggo.callout>

Callout with an icon:

<Doggo.callout title="Fun Dog Fact">
  <:icon><Heroicons.information_circle /></:icon>
  <p>
    Did you know? Dogs have a sense of time and can get upset when their
    routine is changed.
  </p>
</Doggo.callout>

Attributes

id (:string) (required)
variant (:atom) - Defaults to :info.
title (:string) - An optional title. Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required) - The main content of the alert.
icon - Optional slot to render an icon.

card(assigns)

(since 0.1.0)

Renders a card in an article tag, typically used repetitively in a grid or flex box layout.

Usage

<Doggo.card>
  <:image>
    <img src="image.png" alt="Picture of a dog dressed in a poncho." />
  </:image>
  <:header><h2>Dog Fashion Show</h2></:header>
  <:main>
    The next dog fashion show is coming up quickly. Here's what you need
    to look out for.
  </:main>
  <:footer>
    <span>2023-11-15 12:24</span>
    <span>Events</span>
  </:footer>
</Doggo.card>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

image - An optional image slot. The slot content will be rendered within a figure element.
header - The header of the card. You typically want to wrap the header in a h2 or h3 tag, or another header level, depending on the hierarchy on the page.
main - The main content of the card.
footer - A footer of the card, typically containing controls, tags, or meta information.

carousel(assigns)

(since 0.5.0)

Renders a carousel for presenting a sequence of items, such as images or text.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Handle previous/next buttons
Handle pagination tabs
Auto rotation
Disable auto rotation when controls are used
Disable previous/next button on first/last item.
Focus management and keyboard support for pagination

Example

<Doggo.carousel label="Our Dogs">
  <:previous label="Previous Slide">
    <Heroicons.chevron_left />
  </:previous>
  <:next label="Next Slide">
    <Heroicons.chevron_right />
  </:next>
  <:item label="1 of 3">
    <Doggo.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog wearing a colorful poncho walks down a fashion show runway."
      ratio={{16, 9}}
    />
  </:item>
  <:item label="2 of 3">
    <Doggo.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog dressed in a sumptuous, baroque-style costume, complete with jewels and intricate embroidery, parades on an ornate runway at a luxurious fashion show, embodying opulence and grandeur."
      ratio={{16, 9}}
    />
  </:item>
  <:item label="3 of 3">
    <Doggo.image
      src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
      alt="A dog adorned in a lavish, flamboyant outfit, including a large feathered hat and elaborate jewelry, struts confidently down a luxurious fashion show runway, surrounded by bright lights and an enthusiastic audience."
      ratio={{16, 9}}
    />
  </:item>
</Doggo.carousel>

Attributes

id (:string) (required)
label (:string) - A accessibility label for the carousel. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this carousel.
Example:
```
<h3 id="dog-carousel-label">Our Dogs</h3>
<.carousel labelledby="dog-carousel-label"></.carousel>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
carousel_roledescription (:string) - Sets the aria-roledescription attribute to describe the region as a carousel. This value should be translated to the language in which the rest of the page is displayed.
Defaults to "carousel".
slide_roledescription (:string) - Sets the aria-roledescription attribute to describe a slide. This value should be translated to the language in which the rest of the page is displayed.
Defaults to "slide".
pagination (:boolean) - Defaults to false.
pagination_label (:string) - Defaults to "Slides".
pagination_slide_label (:any) - 1-arity function that takes the slide number as an argument and returns the aria label for the slide as used in the pagination buttons.
Defaults to &Doggo.slide_label/1.
auto_rotation (:boolean) - Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required) - Place the carousel_item/1 component here.
previous - Accepts attributes:
- label (:string)
next - Accepts attributes:
- label (:string)
item (required) - Accepts attributes:
- label (:string) - Aria label for the slide, e.g. "1 of 5".

cluster(assigns)

(since 0.4.0)

Use the cluster component to visually group children.

Common use cases are groups of buttons, or group of tags.

Example

<Doggo.cluster>
  <div>some item</div>
  <div>some other item</div>
</Doggo.cluster>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required)

combobox(assigns)

(since 0.5.0)

Renders a text input with a popup that allows users to select a value from a list of suggestions.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Showing/hiding suggestions
Filtering suggestions
Selecting a value
Focus management
Keyboard support

Example

With simple values:

<Doggo.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    "Labrador Retriever",
    "German Shepherd",
    "Golden Retriever",
    "French Bulldog",
    "Bulldog"
  ]}
/>

With label/value pairs:

<Doggo.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    {"Labrador Retriever", "labrador"},
    {"German Shepherd", "german_shepherd"},
    {"Golden Retriever", "golden_retriever"},
    {"French Bulldog", "french_bulldog"},
    {"Bulldog", "bulldog"}
  ]}
/>

With label/value/description tuples:

<Doggo.combobox
  id="dog-breed-selector"
  name="breed"
  list_label="Dog breeds"
  options={[
    {"Labrador Retriever", "labrador", "Friendly and outgoing"},
    {"German Shepherd", "german_shepherd", "Confident and smart"},
    {"Golden Retriever", "golden_retriever", "Intelligent and friendly"},
    {"French Bulldog", "french_bulldog", "Adaptable and playful"},
    {"Bulldog", "bulldog", "Docile and willful"}
  ]}
/>

Attributes

id (:string) (required) - Sets the DOM ID for the input.
name (:string) (required) - Sets the name for the text input.
value (:string) - The current input value. The display value for the text input is derived by finding the given value in the list of options.
Defaults to nil.
list_label (:string) (required) - Sets the aria label for the list box. For example, if the combobox allows the user to select a country, the list label could be "Countries". The value should start with an uppercase letter and be localized.
options (:list) (required) - A list of available options.
- If a list of primitive values is passed, each item serves as both the label and the input value.
- If a list of 2-tuples is passed, the first tuple element serves as label and the second element serves as input value.
- If a list of 3-tuples is passed, the third tuple element serves as an additional description.
Global attributes are accepted. Any additional HTML attributes.

date(assigns)

(since 0.1.0)

Renders a Date, DateTime, or NaiveDateTime in a <time> tag.

Examples

By default, the given value is formatted for display with to_string/1. This:

<Doggo.date value={~D[2023-02-05]} />

Will be rendered as:

<time datetime="2023-02-05">
  2023-02-05
</time>

You can also pass a custom formatter function. For example, if you are using ex_cldr_dates_times in your application, you could do this:

<Doggo.date
  value={~D[2023-02-05]}
  formatter={&MyApp.Cldr.Date.to_string!/1}
/>

Which, depending on your locale, may be rendered as:

<time datetime="2023-02-05">
  Feb 2, 2023
</time>

Attributes

value (:any) (required) - Either a Date, DateTime, or NaiveDateTime.
formatter (:any) - A function that takes a Date as an argument and returns the value formatted for display. Defaults to to_string/1.
title_formatter (:any) - When provided, this function is used to format the date value for the title attribute. If the attribute is not set, no title attribute will be added.
Defaults to nil.
timezone (:string) - If set and the given value is a DateTime, the value will be shifted to that time zone. This affects both the display value and the datetime tag. Note that you need to configure a time zone database for this to work.
Defaults to nil.

datetime(assigns)

(since 0.1.0)

Renders a DateTime or NaiveDateTime in a <time> tag.

Examples

By default, the given value is formatted for display with to_string/1. This:

<Doggo.datetime value={~U[2023-02-05 12:22:06.003Z]} />

Will be rendered as:

<time datetime="2023-02-05T12:22:06.003Z">
  2023-02-05 12:22:06.003Z
</time>

You can also pass a custom formatter function. For example, if you are using ex_cldr_dates_times in your application, you could do this:

<Doggo.datetime
  value={~U[2023-02-05 14:22:06.003Z]}
  formatter={&MyApp.Cldr.DateTime.to_string!/1}
/>

Which, depending on your locale, may be rendered as:

<time datetime="2023-02-05T14:22:06.003Z">
  Feb 2, 2023, 14:22:06 PM
</time>

Attributes

value (:any) (required) - Either a DateTime or NaiveDateTime.
formatter (:any) - A function that takes a DateTime or a NaiveDateTime as an argument and returns the value formatted for display. Defaults to to_string/1.
title_formatter (:any) - When provided, this function is used to format the date time value for the title attribute. If the attribute is not set, no title attribute will be added.
Defaults to nil.
precision (:atom) - Precision to truncate the given value with. The truncation is applied on both the display value and the value of the datetime attribute.
Defaults to nil.
timezone (:string) - If set and the given value is a DateTime, the value will be shifted to that time zone. This affects both the display value and the datetime tag. Note that you need to configure a time zone database for this to work.
Defaults to nil.

drawer(assigns)

(since 0.1.0)

Renders a drawer with a brand, top, and bottom slot.

All slots are optional, and you can render any content in them. If you want to use the drawer as a sidebar, you can use the vertical_nav/1 and vertical_nav_section/1 components.

Example

Minimal example:

<Doggo.drawer>
  <:main>Content</:main>
</Doggo.drawer>

With all slots:

<Doggo.drawer>
  <:header>Doggo</:header>
  <:main>Content at the top</:main>
  <:footer>Content at the bottom</:footer>
</Doggo.drawer>

With navigation and sections:

<Doggo.drawer>
  <:header>
    <.link navigate={~p"/"}>App</.link>
  </:header>
  <:main>
    <Doggo.vertical_nav label="Main">
      <:item>
        <.link navigate={~p"/dashboard"}>Dashboard</.link>
      </:item>
      <:item>
        <Doggo.vertical_nav_nested>
          <:title>Content</:title>
          <:item current_page>
            <.link navigate={~p"/posts"}>Posts</.link>
          </:item>
          <:item>
            <.link navigate={~p"/comments"}>Comments</.link>
          </:item>
        </Doggo.vertical_nav_nested>
      </:item>
    </.vertical_nav>
    <Doggo.vertical_nav_section>
      <:title>Search</:title>
      <:item><input type="search" placeholder="Search" /></:item>
    </Doggo.vertical_nav_section>
  </:main>
  <:footer>
    <Doggo.vertical_nav label="User menu">
      <:item>
        <.link navigate={~p"/settings"}>Settings</.link>
      </:item>
      <:item>
        <.link navigate={~p"/logout"}>Logout</.link>
      </:item>
    </Doggo.vertical_nav>
  </:footer>
</Doggo.drawer>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

header - Optional slot for the brand name or logo.
main - Slot for content that is rendered after the brand, at the start of the side bar.
footer - Slot for content that is rendered at the end of the drawer, potentially pinned to the bottom, if there is enough room.

fallback(assigns)

(since 0.1.0)

The fallback component renders a given value unless it is empty, in which case it renders a fallback value instead.

The values nil, "", [] and %{} are treated as empty values.

This component optionally applies a formatter function to non-empty values.

The primary purpose of this component is to enhance accessibility. In situations where a value in a table column or property list is set to be invisible or not displayed, it's crucial to provide an alternative text for screen readers.

Examples

Render the value of @some_value if it's available, or display the default placeholder otherwise:

<Doggo.fallback value={@some_value} />

Apply a formatter function to @some_value if it is not nil:

<Doggo.fallback value={@some_value} formatter={&format_date/1} />

Set a custom placeholder and text for screen readers:

<Doggo.fallback
  value={@some_value}
  placeholder="n/a"
  accessibility_text="not available"
/>

Attributes

value (:any) (required) - The value to display. If the value is nil, "", [] or %{}, the placeholder is rendered instead.
formatter (:any) - A 1-arity function that takes the value and returns the value for display. The formatter function is only applied if value is not an empty value.
Defaults to nil.
placeholder (:any) - The placeholder to render if the value is empty. Defaults to "-".
accessibility_text (:string) - The text for the aria-label attribute in case the value is empty. Defaults to "not set".

flash_group(assigns)

(since 0.1.0)

Shows the flash messages as alerts.

Hidden attribute

This component uses the hidden attribute to hide alerts related to disconnections. If you explicitly set the CSS display property for the alert/1 component, it may override the default browser behavior for the hidden attribute, in which case you will see these alerts flashing on each page load. To prevent this, add the following lines to your CSS styles:

[hidden] {
  display: none !important;
}

Examples

<Doggo.flash_group flash={@flash} />

Attributes

flash (:map) (required) - The map of flash messages.
info_title (:string) - Alert title for flash messages with level :info. Defaults to "Success".
error_title (:string) - Alert title for flash messages with level :error. Defaults to "Error".
client_error_title (:string) - Alert title for disconnection errors. Defaults to "Disconnected".
client_error_msg (:string) - Alert message for disconnection errors. Defaults to "Attempting to reconnect.".
server_error_title (:string) - Alert title for server errors. Defaults to "Error".
server_error_msg (:string) - Alert message for server errors. Defaults to "Please wait while we get back on track.".
id (:string) - An ID for the container. Defaults to "flash-group".
class (:any) - An optional class name. Defaults to nil.
Global attributes are accepted. Any additional HTML attributes.

frame(assigns)

(since 0.2.0)

Renders a frame with an aspect ratio for images or videos.

This component is used within the image/1 component.

Example

Rendering an image with the aspect ratio 4:3.

<Doggo.frame ratio={{4, 3}}>
  <img src="image.png" alt="An example image illustrating the usage." />
</Doggo.frame>

Rendering an image as a circle.

<Doggo.frame circle>
  <img src="image.png" alt="An example image illustrating the usage." />
</Doggo.frame>

Attributes

ratio (:any) - Defaults to nil.
circle (:boolean) - Defaults to false.

Slots

inner_block

icon(assigns)

(since 0.1.0)

Renders a customizable icon using a slot for SVG content.

This component does not bind you to a specific set of icons. Instead, it provides a slot for inserting SVG content from any icon library you choose

The label attribute is used to describe the icon and is by default applied as an aria-label for accessibility. If label_placement is set to :left or :right, the text becomes visible alongside the icon.

Examples

Render an icon with text as aria-label using the heroicons library:

<Doggo.icon label="report bug"><Heroicons.bug_ant /></.icon>

To display the text visibly:

<Doggo.icon label="report bug" label_placement={:right}>
  <Heroicons.bug_ant />
</Doggo.icon>

aria-hidden
Not all icon libraries set the aria-hidden attribute by default. Always make sure that it is set on the <svg> element that the library renders.

Attributes

label (:string) - Text that describes the icon. If label_placement is set to :hidden, this text is set as aria-label attribute.
Defaults to nil.
label_placement (:atom) - Position of the label relative to the icon. If set to :hidden, the label text is used as aria-label attribute.
Defaults to :hidden.
size (:atom) - Defaults to :normal.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required) - Slot for the SVG element.

icon_sprite(assigns)

(since 0.1.0)

Renders an icon using an SVG sprite.

Examples

Render an icon with text as aria-label:

<Doggo.icon name="arrow-left" label="Go back" />

To display the text visibly:

<Doggo.icon name="arrow-left" label="Go back" label_placement={:right} />

Attributes

name (:string) (required) - Icon name as used in the sprite.
sprite_url (:string) - The URL of the SVG sprite. Defaults to "/assets/icons/sprite.svg".
label (:string) - Text that describes the icon. If label_placement is set to :hidden, this text is set as aria-label attribute.
Defaults to nil.
label_placement (:atom) - Position of the label relative to the icon. If set to :hidden, the label text is used as aria-label attribute.
Defaults to :hidden.
size (:atom) - Defaults to :normal.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

image(assigns)

(since 0.2.0)

Renders an image with an optional caption.

Example

<Doggo.image
  src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
  alt="A dog wearing a colorful poncho walks down a fashion show runway."
  ratio={{16, 9}}
>
  <:caption>
    Spotlight on canine couture: A dog fashion show where four-legged models
    dazzle the runway with the latest in pet apparel.
  </:caption>
</Doggo.image>

Attributes

src (:string) (required) - The URL of the image to render.
srcset (:any) - A set of image URLs in different sizes. Can be passed as a string or a map.
For example, this map:
```
%{
  "1x" => "images/image-1x.jpg",
  "2x" => "images/image-2x.jpg"
}
```
Will result in this srcset:
```
"images/image-1x.jpg 1x, images/image-2x.jpg 2x"
```
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset.
Defaults to nil.
sizes (:string) - Specifies media conditions for the image widths, if the srcset attribute uses intrinsic widths.
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes.
Defaults to nil.
alt (:string) (required) - A text description of the image for screen reader users and those with slow internet. Effective alt text should concisely capture the image's essence and function, considering its context within the content. Aim for clarity and inclusivity without repeating information already conveyed by surrounding text, and avoid starting with "Image of" as screen readers automatically announce image presence.
width (:integer) - Defaults to nil.
height (:integer) - Defaults to nil.
loading (:string) - Defaults to "lazy".
ratio (:any) - Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

caption

modal(assigns)

(since 0.1.0)

Renders a modal dialog for content such as forms and informational panels.

This component is appropriate for non-critical interactions. For dialogs requiring immediate user response, such as confirmations or warnings, use Doggo.alert_dialog/1 instead.

There are two primary ways to manage the display of the modal: via URL state or by setting and removing the open attribute.

To toggle the modal visibility based on the URL:

Use the :if attribute to conditionally render the modal when a specific live action matches.
Set the on_cancel attribute to patch back to the original URL when the user chooses to close the modal.
Set the open attribute to declare the modal's initial visibility state.

Example

<Doggo.modal
  :if={@live_action == :show}
  id="pet-modal"
  on_cancel={JS.patch(~p"/pets")}
  open
>
  <:title>Show pet</:title>
  <p>My pet is called Johnny.</p>
  <:footer>
    <.link phx-click={JS.exec("data-cancel", to: "#pet-modal")}>
      Close
    </.link>
  </:footer>
</Doggo.modal>

To open the modal, patch or navigate to the URL associated with the live action.

<.link patch={~p"/pets/#{@id}"}>show</.link>

To toggle the modal visibility dynamically with the open attribute:

Omit the open attribute in the template.
Use the show_modal/1 and hide_modal/1 functions to change the visibility.

Example

<Doggo.modal id="pet-modal">
  <:title>Show pet</:title>
  <p>My pet is called Johnny.</p>
  <:footer>
    <.link phx-click={JS.exec("data-cancel", to: "#pet-modal")}>
      Close
    </.link>
  </:footer>
</Doggo.modal>

To open modal, use the show_modal/1 function.

<Doggo.button
  phx-click={Doggo.show_modal("pet-modal")}
  aria-haspopup="dialog"
>
  show
</Doggo.button>

To hide the modal when the open attribute is not set, use the following CSS styles:

dialog.modal:not([open]),
dialog.modal[open="false"] {
  display: none;
}

id (:string) (required)
open (:boolean) - Initializes the modal as open. Defaults to false.
on_cancel (Phoenix.LiveView.JS) - An additional Phoenix.LiveView.JS command to execute when the dialog is canceled. This command is executed in addition to closing the dialog. If you only want the dialog to be closed, you don't have to set this attribute.
Defaults to %Phoenix.LiveView.JS{ops: []}.
dismissable (:boolean) - When set to true, the dialog can be dismissed by clicking a close button or by pressing the escape key.
Defaults to true.
close_label (:string) - Aria label for the close button. Defaults to "Close".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

title (required)
inner_block (required) - The modal body.
close - The content for the 'close' link. Defaults to the word 'close'.
footer

page_header(assigns)

(since 0.3.0)

Renders a header that is specific to the content of the current page.

Unlike a site-wide header, which offers consistent navigation and elements like logos throughout the website or application, this component is meant to describe the unique content of each page. For instance, on an article page, it would display the article's title.

It is typically used as a direct child of the <main> element.

Example

<main>
  <Doggo.page_header title="Puppy Profiles" subtitle="Share Your Pup's Story">
    <:action>
      <Doggo.button_link patch={~p"/puppies/new"}>Add New Profile</Doggo.button_link>
    </:action>
  </Doggo.page_header>

  <section>
    <!-- Content -->
  </section>
</main>

Attributes

title (:string) (required) - The title for the current page.
subtitle (:string) - An optional sub title. Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

action - A slot for action buttons related to the current page.

property_list(assigns)

(since 0.1.0)

Renders a list of properties, i.e. key/value pairs.

Example

<Doggo.property_list>
  <:prop label={gettext("Name")}>George</:prop>
  <:prop label={gettext("Age")}>42</:prop>
</Doggo.property_list>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

prop - A property to be rendered. Accepts attributes:
- label (:string) (required)

radio_group(assigns)

(since 0.5.0)

Renders a group of radio buttons, for example for a toolbar.

To render radio buttons within a regular form, use input/1 with the "radio-group" type instead.

Example

<Doggo.radio_group
  id="favorite-dog"
  name="favorite-dog"
  label="Favorite Dog"
  options={[
    {"Labrador Retriever", "labrador"},
    {"German Shepherd", "german_shepherd"},
    {"Golden Retriever", "golden_retriever"},
    {"French Bulldog", "french_bulldog"},
    {"Beagle", "beagle"}
  ]}
/>

CSS

To target the wrapper, use an attribute selector:

[role="radio-group"] {}

Attributes

id (:string) (required)
name (:string) (required) - The name attribute for the input elements.
label (:string) - A accessibility label for the radio group. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this radio group.
Example:
```
<h3 id="dog-rg-label">Favorite Dog</h3>
<.radio_group labelledby="dog-rg-label"></.radio_group>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
options (:list) (required) - A list of options. It can be given a list values or as a list of {label, value} tuples.
value (:any) - The currently selected value, which is compared with the option value to determine whether a radio button is checked.
Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

skeleton(assigns)

(since 0.3.0)

Renders a skeleton loader, a placeholder for content that is in the process of loading.

It mimics the layout of the actual content, providing a better user experience during loading phases.

Usage

Render one of several primitive types:

<Doggo.skeleton type={:text_line} />

Combine primitives for complex layouts:

<div class="card-skeleton" aria-busy="true">
  <Doggo.skeleton type={:image} />
  <Doggo.skeleton type={:text_line} />
  <Doggo.skeleton type={:text_line} />
  <Doggo.skeleton type={:text_line} />
  <Doggo.skeleton type={:rectangle} />
</div>

To modify the primitives for your use cases, you can use custom classes or CSS properties:

<Doggo.skeleton type={:text_line} class="header" />

<Doggo.skeleton type={:image} style="--aspect-ratio: 75%;" />

Aria-busy attribute

When using skeleton loaders, apply aria-busy="true" to the container element that contains the skeleton layout. For standalone use, add the attribute directly to the individual skeleton loader.

Async result component

The easiest way to load data asynchronously and render a skeleton loader is to use LiveView's async operations and Phoenix.Component.async_result/1.

Assuming you defined a card skeleton component as described above:

<.async_result :let={puppy} assign={@puppy}>
  <:loading><.card_skeleton /></:loading>
  <:failed :let={_reason}>There was an error loading the puppy.</:failed>
  <!-- Card for loaded content -->
</.async_result>

Attributes

type (:atom) (required) - Must be one of :text_line, :text_block, :image, :circle, :rectangle, or :square.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

split_pane(assigns)

(since 0.5.0)

Renders a horizontal or vertical resizable split pane.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Resize panes with the mouse
Resize panes with the keyboard

Examples

Horizontal separator with label:

<Doggo.split_pane
  id="sidebar-splitter"
  label="Sidebar"
  orientation="horizontal"
>
  <:primary>One</:primary>
  <:secondary>Two</:secondary>
</Doggo.split_pane>

Horizontal separator with visible label:

<Doggo.split_pane id="sidebar-splitter"
  labelledby="sidebar-label"
  orientation="horizontal"
>
  <:primary>
    <h2 id="sidebar-label">Sidebar</h2>
    <p>One</p>
  </:primary>
  <:secondary>Two</:secondary>
</Doggo.split_pane>

Nested window splitters:

<Doggo.split_pane
  id="sidebar-splitter"
  label="Sidebar"
  orientation="horizontal"
>
  <:primary>One</:primary>
  <:secondary>
    <Doggo.split_pane
      id="filter-splitter"
      label="Filters"
      orientation="vertical"
    >
      <:primary>Two</:primary>
      <:secondary>Three</:secondary>
    </Doggo.split_pane>
  </:secondary>
</Doggo.split_pane>

Attributes

label (:string) - An accessibility label for the separator if the primary pane has no visible label. If it has a visible label, set the labelledby attribute instead.
Note that the label should describe the primary pane, not the resize handle.
Defaults to nil.
labelledby (:string) - If the primary pane has a visible label, set this attribute to the DOM ID of that label. Otherwise, provide a label via the label attribute.
Defaults to nil.
id (:string) (required)
orientation (:string) (required) - Must be one of "horizontal", or "vertical".
default_size (:integer) (required)
min_size (:integer) - Defaults to 0.
max_size (:integer) - Defaults to 100.

Slots

primary (required)
secondary (required)

stack(assigns)

(since 0.1.0)

Applies a vertical margin between the child elements.

Example

<Doggo.stack>
  <div>some block</div>
  <div>some other block</div>
</Doggo.stack>

To apply a vertical margin on nested elements as well, set recursive to true.

<Doggo.stack recursive={true}>
  <div>
    <div>some nested block</div>
    <div>another nested block</div>
  </div>
  <div>some other block</div>
</Doggo.stack>

Attributes

recursive (:boolean) - If true, the stack margins will be applied to nested elements as well. Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required)

switch(assigns)

(since 0.1.0)

Renders a switch as a button.

If you want to render a switch as part of a form, use the input/1 component with the type "switch" instead.

Note that this component only renders a button with a label, a state, and <span> with the class switch-control. You will need to style the switch control span with CSS in order to give it the appearance of a switch.

Examples

<Doggo.switch
  label="Subscribe"
  checked={true}
  phx-click="toggle-subscription"
/>

Attributes

label (:string) (required)
on_text (:string) - Defaults to "On".
off_text (:string) - Defaults to "Off".
checked (:boolean) - Defaults to false.
Global attributes are accepted.

table(assigns)

(since 0.1.0)

Renders a simple table.

Examples

<Doggo.table id="pets" rows={@pets}>
  <:col :let={p} label="name"><%= p.name %></:col>
  <:col :let={p} label="age"><%= p.age %></:col>
</Doggo.table>

Attributes

id (:string) (required)
rows (:list) (required) - The list of items to be displayed in rows.
caption (:string) - Content for the <caption> element. Defaults to nil.
row_id (:any) - Overrides the default function that retrieves the row ID from a stream item. Defaults to nil.
row_click (:any) - Sets the phx-click function attribute for each row td. Expects to be a function that receives a row item as an argument. This does not add the phx-click attribute to the action slot.
Example:
```
row_click={&JS.navigate(~p"/users/#{&1}")}
```
Defaults to nil.
row_item (:any) - This function is called on the row item before it is passed to the :col and :action slots.
Defaults to &Function.identity/1.

Slots

col (required) - For each column to render, add one <:col> element.
```
<:col :let={pet} label="Name" field={:name} col_style="width: 20%;">
  <%= pet.name %>
</:col>
```
Any additional assigns will be added as attributes to the <td> elements.
Accepts attributes:
- label (:any) - The content for the header column.
- col_attrs (:list) - If set, a <colgroup> element is rendered and the attributes are added to the <col> element of the respective column.
action - The slot for showing user actions in the last table column. These columns do not receive the row_click attribute.
```
<:action :let={user}>
  <.link navigate={~p"/users/#{user}"}>Show</.link>
</:action>
```
Accepts attributes:
- label (:string) - The content for the header column.
- col_attrs (:list) - If set, a <colgroup> element is rendered and the attributes are added to the <col> element of the respective column.

foot - You can optionally add a foot. The inner block will be rendered inside a tfoot element.

<Flop.Phoenix.table>
  <:foot>
    <tr><td>Total: <span class="total"><%= @total %></span></td></tr>
  </:foot>
</Flop.Phoenix.table>

tabs(assigns)

(since 0.5.0)

Renders tab panels.

This component is meant for tabs that toggle content panels within the page. If you want to link to a different view or live action, use tab_navigation/1 instead.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Roving tabindex
Move focus with arrow keys

Example

<Doggo.tabs id="dog-breed-profiles" label="Dog Breed Profiles">
  <:panel label="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:panel>
  <:panel label="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:panel>
  <:panel label="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:panel>
</Doggo.tabs>

Attributes

id (:string) (required)
label (:string) - A accessibility label for the tabs. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Do not repeat the word tab list or similar in the label, since it is already announced by screen readers.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels the tabs.
Example:
```
<h3 id="my-tabs-label">Dogs</h3>
<Doggo.tabs labelledby="my-tabs-label"></Doggo.tabs>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

panel (required) - Accepts attributes:
- label (:string)

tag(assigns)

(since 0.3.0)

Renders a tag, typically used for displaying labels, categories, or keywords.

Examples

Plain tag:

<Doggo.tag>Well-Trained</Doggo.tag>

With icon:

<Doggo.tag>
  Puppy
  <Doggo.icon><Heroicons.edit /></Doggo.icon>
</Doggo.tag>

With delete button:

<Doggo.tag>
  High Energy
  <button
    phx-click="remove-tag"
    phx-value-tag="high-energy"
    aria-label="Remove tag"
  >
    <Doggo.icon><Heroicons.x /></Doggo.icon>
  </button>
</Doggo.tag>

Attributes

size (:atom) - Defaults to :normal.
variant (:atom) - Defaults to nil.
shape (:atom) - Defaults to nil.

Slots

inner_block (required)

time(assigns)

(since 0.1.0)

Renders a Time, DateTime, or NaiveDateTime in a <time> tag.

Examples

By default, the given value is formatted for display with to_string/1. This:

<Doggo.time value={~T[12:22:06.003Z]} />

Will be rendered as:

<time datetime="12:22:06.003">
  12:22:06.003
</time>

You can also pass a custom formatter function. For example, if you are using ex_cldr_dates_times in your application, you could do this:

<Doggo.time
  value={~T[12:22:06.003]}
  formatter={&MyApp.Cldr.Time.to_string!/1}
/>

Which, depending on your locale, may be rendered as:

<time datetime="14:22:06.003">
  14:22:06 PM
</time>

Attributes

value (:any) (required) - Either a Time, DateTime, or NaiveDateTime.
formatter (:any) - A function that takes a Time, DateTime, or NaiveDateTime as an argument and returns the value formatted for display. Defaults to to_string/1.
title_formatter (:any) - When provided, this function is used to format the time value for the title attribute. If the attribute is not set, no title attribute will be added.
Defaults to nil.
precision (:atom) - Precision to truncate the given value with. The truncation is applied on both the display value and the value of the datetime attribute.
Defaults to nil.
timezone (:string) - If set and the given value is a DateTime, the value will be shifted to that time zone. This affects both the display value and the datetime tag. Note that you need to configure a time zone database for this to work.
Defaults to nil.

toolbar(assigns)

(since 0.5.0)

Renders a container for a set of controls.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Roving tabindex
Move focus with arrow keys

Direct children of this component can be any types buttons or groups of buttons.

<Doggo.toolbar label="Actions for the dog">
  <div role="group">
    <button phx-click="feed-dog">
      <Doggo.icon label="Feed dog"><Icons.feed /></Doggo.icon>
    </button>
    <button phx-click="walk-dog">
      <Doggo.icon label="Walk dog"><Icons.walk /></Doggo.icon>
    </button>
  </div>
  <div role="group">
    <button phx-click="teach-trick">
      <Doggo.icon label="Teach a Trick"><Icons.teach /></Doggo.icon>
    </button>
    <button phx-click="groom-dog">
      <Doggo.icon label="Groom dog"><Icons.groom /></Doggo.icon>
    </button>
  </div>
</Doggo.toolbar>

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.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this tree.
Example:
```
<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.
Defaults to nil.
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.
Defaults to nil.
Global attributes are accepted. Any additional HTML attributes.

inner_block (required) - Place any number of buttons, groups of buttons, toggle buttons, menu buttons, or disclosure buttons here.

tooltip(assigns)

(since 0.3.0)

Renders content with a tooltip.

There are different ways to render a tooltip. This component renders a <div> with the tooltip role, which is hidden unless the element is hovered on or focused. For example CSS for this kind of tooltip, refer to ARIA: tooltip role.

A simpler alternative for styled text-only tooltips is to use a data attribute and the attr CSS function. Doggo does not provide a component for that kind of tooltip, since it is controlled by attributes only. You can check Pico CSS for an example implementation.

Example

With an inline text:

<p>
  Did you know that the
  <Doggo.tooltip id="labrador-info">
    Labrador Retriever
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </Doggo.tooltip>
  is one of the most popular dog breeds in the world?
</p>

If the inner block contains a link, add the :contains_link attribute:

<p>
  Did you know that the
  <Doggo.tooltip id="labrador-info" contains_link>
    <.link navigate={~p"/labradors"}>Labrador Retriever</.link>
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </Doggo.tooltip>
  is one of the most popular dog breeds in the world?
</p>

Attributes

id (:string) (required)
contains_link (:boolean) - If false, the component sets tabindex="0" on the element wrapping the inner block, so that the tooltip can be made visible by focusing the element.
If the inner block already contains an element that is focusable, such as a link or a button, set this attribute to true.
Defaults to false.

Slots

inner_block (required)
tooltip (required)

tree(assigns)

(since 0.5.0)

Renders a hierarchical list as a tree.

A good use case for this component is a folder structure. For navigation and other menus, a regular nested list should be preferred.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Expand and collapse nodes
Select nodes
Navigate tree with arrow keys

Example

<Doggo.tree label="Dogs">
  <Doggo.tree_item>
    Breeds
    <:items>
      <Doggo.tree_item>Golden Retriever</Doggo.tree_item>
      <Doggo.tree_item>Labrador Retriever</Doggo.tree_item>
    </:items>
  </Doggo.tree_item>
  <Doggo.tree_item>
    Characteristics
    <:items>
      <Doggo.tree_item>Playful</Doggo.tree_item>
      <Doggo.tree_item>Loyal</Doggo.tree_item>
    </:items>
  </Doggo.tree_item>
</Doggo.tree>

CSS

To target the wrapper, use an attribute selector:

[role="tree"] {}

Attributes

label (:string) - A accessibility label for the tree. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Do not repeat the word tree in the label, since it is already announced by screen readers.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this tree.
Example:
```
<h3 id="dog-tree-label">Dogs</h3>
<.tree labelledby="dog-tree-label"></.tree>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required) - Slot for the root nodes of the tree. Use the tree_item/1 component as direct children.

tree_item(assigns)

(since 0.5.0)

Renders a tree item within a tree/1.

This component can be used as a direct child of tree/1 or within the items slot of this component.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Expand and collapse nodes
Select nodes
Navigate tree with arrow keys

Example

<Doggo.tree label="Dogs">
  <Doggo.tree_item>
    Breeds
    <:items>
      <Doggo.tree_item>Golden Retriever</Doggo.tree_item>
      <Doggo.tree_item>Labrador Retriever</Doggo.tree_item>
    </:items>
  </Doggo.tree_item>
  <Doggo.tree_item>
    Characteristics
    <:items>
      <Doggo.tree_item>Playful</Doggo.tree_item>
      <Doggo.tree_item>Loyal</Doggo.tree_item>
    </:items>
  </Doggo.tree_item>
</Doggo.tree>

Icons can be added before the label:

<Doggo.tree_item> <Heroicon.folder /> Breeds <:items>

<Doggo.tree_item><Heroicon.document /> Golden Retriever</Doggo.tree_item>
<Doggo.tree_item><Heroicon.document /> Labrador Retriever</Doggo.tree_item>

</:items> </Doggo.tree_item>

Slots

items - Slot for children of this item. Place one or more additional tree_item/1 components within this slot, or omit if this is a leaf node.
inner_block (required) - Slot for the item label.

Buttons

button(assigns)

(since 0.1.0)

Renders a button.

Use this component when you need to perform an action that doesn't involve navigating to a different page, such as submitting a form, confirming an action, or deleting an item.

If you need to navigate to a different page or a specific section on the current page and want to style the link like a button, use button_link/1 instead.

Examples

<Doggo.button>Confirm</Doggo.button>

<Doggo.button type="submit" variant={:secondary} size={:medium} shape={:pill}>
  Submit
</Doggo.button>

To indicate a loading state, for example when submitting a form, use the aria-busy attribute:

<Doggo.button aria-label="Saving..." aria-busy>
  click me
</Doggo.button>

Attributes

type (:string) - Defaults to "button".
variant (:atom) - Defaults to :primary.
fill (:atom) - Defaults to :solid.
size (:atom) - Defaults to :normal.
shape (:atom) - Defaults to nil.
disabled (:boolean) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["autofocus", "form", "name", "value"].

Slots

inner_block (required)

button_link(assigns)

(since 0.1.0)

Renders a link (<a>) that has the role and style of a button.

Use this component when you need to style a link to a different page or a specific section within the same page as a button.

To perform an action on the same page, including toggles and revealing/hiding elements, you should always use a real button instead. See button/1, toggle_button/1, and disclosure_button/1.

Examples

<Doggo.button_link patch={~p"/confirm"}>Confirm</.button>

<Doggo.button_link
  navigate={~p"/registration"}
  variant={:primary}
  shape={:pill}>
  Submit
</Doggo.button_link>

Attributes

variant (:atom) - Defaults to :primary.
fill (:atom) - Defaults to :solid.
size (:atom) - Defaults to :normal.
shape (:atom) - Defaults to nil.
disabled (:boolean) - Since <a> tags cannot have a disabled attribute, this attribute toggles the "is-disabled" class.
Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Supports all globals plus: ["download", "hreflang", "referrerpolicy", "rel", "target", "type", "navigate", "patch", "href", "replace", "method", "csrf_token"].

Slots

inner_block (required)

disclosure_button(assigns)

(since 0.5.0)

Renders a button that toggles the visibility of another element.

Use this component to reveal or hide additional content, such as in collapsible sections or dropdown menus.

For a button that toggles other states, use toggle_button/1 instead. See also button/1 and button_link/1.

Examples

Set the controls attribute to the DOM ID of the element that you want to toggle with the button.

The initial state is hidden. Do not forget to add the hidden attribute to the toggled element. Otherwise, visibility of the element will not align with the aria-expanded attribute of the button.

<Doggo.disclosure_button controls="data-table">
  Data Table
</Doggo.disclosure_button>

<table id="data-table" hidden></table>

Attributes

controls (:string) (required) - The DOM ID of the element that this button controls.
Global attributes are accepted.

Slots

inner_block (required)

fab(assigns)

(since 0.3.0)

Renders a floating action button.

Example

<Doggo.fab label="Add item" phx-click={JS.patch(to: "/items/new")}>
  <Doggo.icon><Heroicons.plus /></Doggo.icon>
</Doggo.fab>

Attributes

label (:string) (required)
variant (:atom) - Defaults to :primary.
size (:atom) - Defaults to :normal.
shape (:atom) - Defaults to :circle.
disabled (:boolean) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

toggle_button(assigns)

(since 0.4.0)

Renders a button that toggles a state.

Use this component to switch a feature or setting on or off, for example to toggle dark mode or mute/unmute sound.

Examples

With a Phoenix.LiveView.JS command:

<Doggo.toggle_button on_click={JS.push("toggle-mute")} pressed={@muted}>
  Mute
</Doggo.toggle_button>

Accessibility

The button state is conveyed via the aria-pressed attribute and the button styling. The button text should not change depending on the state. You may however include an icon that changes depending on the state.

CSS

A toggle button can be identified with an attribute selector for the aria-pressed attribute.

// any toggle button regardless of state
button[aria-pressed] {}

// unpressed toggle buttons
button[aria-pressed="false"] {}

// pressed toggle buttons
button[aria-pressed="true"] {}

Attributes

pressed (:boolean) - Defaults to false.
on_click (Phoenix.LiveView.JS) (required) - Phoenix.LiveView.JS command or event name to trigger when the button is clicked.
variant (:atom) - Defaults to :primary.
fill (:atom) - Defaults to :solid.
size (:atom) - Defaults to :normal.
shape (:atom) - Defaults to nil.
disabled (:boolean) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

Form

field_description(assigns)

(since 0.1.0)

Renders the description of an input.

Example

<Doggo.field_description for="name">
  max. 100 characters
</Doggo.field_description>

Attributes

for (:string) (required) - The ID of the input.

Slots

inner_block (required)

field_errors(assigns)

(since 0.1.0)

Renders the errors for an input.

Example

<Doggo.field_errors for="name" errors={["too many characters"]} />

Attributes

for (:string) (required) - The ID of the input.
errors (:list) (required) - A list of errors as strings.

field_group(assigns)

(since 0.3.0)

Use the field group component to visually group multiple inputs in a form.

This component is intended for styling purposes and does not provide semantic grouping. For semantic grouping of related form elements, use the <fieldset> and <legend> HTML elements instead.

Examples

Visual grouping of inputs:

<Doggo.field_group>
  <Doggo.input field={@form[:given_name]} label="Given name" />
  <Doggo.input field={@form[:family_name]} label="Family name"/>
</Doggo.field_group>

Semantic grouping (for reference):

<fieldset>
  <legend>Personal Information</legend>
  <Doggo.input field={@form[:given_name]} label="Given name" />
  <Doggo.input field={@form[:family_name]} label="Family name"/>
</fieldset>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required)

input(assigns)

(since 0.1.0)

Renders a form field including input, label, errors, and description.

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Types

In addition to all HTML input types, the following type values are also supported:

"select" - For <select> elements.

Gettext

To translate field errors using Gettext, configure your Gettext module in config/config.exs.

config :doggo, gettext: MyApp.Gettext

Alternatively, pass the Gettext module as an attribute:

<Doggo.input field={@form[:name]} gettext={MyApp.Gettext} />

Label positioning

The component does not provide an attribute to modify label positioning directly. Instead, label positioning should be handled with CSS. If your application requires different label positions, such as horizontal and vertical layouts, it is recommended to add a modifier class to the form.

For example, the default style could position labels above inputs. To place labels to the left of the inputs in a horizontal form layout, you can add an is-horizontal class to the form:

<.form class="is-horizontal">
  <!-- inputs -->
</.form>

Then, in your CSS, apply the necessary styles to the .field class within forms having the is-horizontal class:

form.is-horizontal .field {
  // styles to position label left of the input
}

The component has a hide_label attribute to visually hide labels while still making them accessible to screen readers. If all labels within a form need to be visually hidden, it may be more convenient to define a .has-visually-hidden-labels modifier class for the <form>.

<.form class="has-visually-hidden-labels">
  <!-- inputs -->
</.form>

Ensure to take checkbox and radio labels into consideration when writing the CSS styles.

Examples

<Doggo.input field={@form[:name]} />

<Doggo.input field={@form[:email]} type="email" />

Radio group and checkbox group

The radio-group and checkbox-group types allow you to easily render groups of radio buttons or checkboxes with a single component invocation. The options attribute is required for these types and has the same format as the options for the select type, except that options may not be nested.

<Doggo.input
  field={@form[:email]}
  type="checkbox-group"
  label="Cuisine"
  options={[
    {"Mexican", "mexican"},
    {"Japanese", "japanese"},
    {"Libanese", "libanese"}
  ]}
/>

Note that the checkbox-group type renders an additional hidden input with an empty value before the checkboxes. This ensures that a value exists in case all checkboxes are unchecked. Consequently, the resulting list value includes an extra empty string. While Ecto.Changeset.cast/3 filters out empty strings in array fields by default, you may need to handle the additional empty string manual in other contexts.

Attributes

id (:any) - Defaults to nil.
name (:any)
label (:string) - Required for all types except "hidden". Defaults to nil.
hide_label (:boolean) - Adds an "is-visually-hidden" class to the <label>. This option does not apply to checkbox and radio inputs.
Defaults to false.
value (:any)
type (:string) - Defaults to "text".
field (Phoenix.HTML.FormField) - A form field struct, for example: @form[:name].
errors (:list)
validations (:list) - A list of HTML input validation attributes (required, minlength, maxlength, min, max, pattern). The attributes are derived automatically from the form.
checked_value (:string) - The value that is sent when the checkbox is checked. Defaults to "true".
checked (:boolean) - The checked attribute for checkboxes.
on_text (:string) - The state text for a switch when on. Defaults to "On".
off_text (:string) - The state text for a switch when off. Defaults to "Off".
prompt (:string) - An optional prompt for select elements. Defaults to nil.
options (:list) - A list of options.
This attribute is supported for the following types:
- "select"
- "radio-group"
- "checkbox-group"
- other text types, date and time types, and the "range" type
If this attribute is set for types other than select, radio, and checkbox, a datalist is rendered for the input.
See Phoenix.HTML.Form.options_for_select/2 for the format. Note that only the select supports nested options.
Defaults to nil.
multiple (:boolean) - Sets the multiple attribute on a select element to allow selecting multiple options.
Defaults to false.
gettext (:atom) - The Gettext module to use for translating error messages. This option can also be set globally, see above.
Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "passwordrules", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

description - A field description to render underneath the input.
addon_left - Can be used to render an icon left in the input. Only supported for single-line inputs.
addon_right - Can be used to render an icon left in the input. Only supported for single-line inputs.

label(assigns)

(since 0.1.0)

Renders the label for an input.

Example

<Doggo.label for="name" required>
  Name
</Doggo.label>

Attributes

for (:string) - The ID of the input. Defaults to nil.
required (:boolean) - If set to true, a 'required' mark is rendered. Defaults to false.
required_title (:any) - Sets the title attribute of the required mark. Defaults to "required".
visually_hidden (:boolean) - Adds an "is-visually-hidden" class to the <label>. Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

inner_block (required)

menu(assigns)

(since 0.5.0)

Renders a menu that offers a list of actions or functions.

This component is meant for organizing actions within an application, rather than for navigating between different pages or sections of a website.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Focus management
keyboard support

Example

If the menu is always visible or can only be toggled by a keyboard shortcut, set the label attribute.

<Doggo.menu label="Actions">
  <:item>Copy</:item>
  <:item>Paste</:item>
  <:item role="separator"></:item>
  <:item>Sort lines</:item>
</Doggo.menu>

If the menu is toggled by a menu_button/1, ensure that the controls attribute of the button matches the DOM ID of the menu and that the labelledby attribute of the menu matches the DOM ID of the button.

<Doggo.menu_button controls="actions-menu" id="actions-button"> Actions </Doggo.menu_button> <Doggo.menu labelledby="actions-button" hidden></Doggo.menu>

Attributes

label (:string) - A accessibility label for the menubar. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this menubar. If the menu is toggled by a menu_button/1, this attribute should be set to the DOM ID of that button.
Example:
```
<Doggo.menu_button controls="actions-menu" id="actions-button">
  Actions
</Doggo.menu_button>
<Doggo.menu labelledby="actions-button" hidden></Doggo.menu>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- role (:string) - Sets the role of the list item. If the item has a menu item, group, menu item radio group or menu item checkbox as a child, use "none". If you want to render a visual separator, use "separator". The default is "none". Must be one of "none", or "separator".

menu_bar(assigns)

(since 0.5.0)

Renders a menu bar, similar to those found in desktop applications.

This component is meant for organizing actions within an application, rather than for navigating between different pages or sections of a website.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Focus management
keyboard support

Example

<Doggo.menu_bar label="Main">
  <:item>
    <Doggo.menu_button controls="actions-menu" id="actions-button">
      Actions
    </Doggo.menu_button>

    <Doggo.menu id="actions-menu" labelledby="actions-button" hidden>
      <:item>
        <Doggo.menu_item on_click={JS.push("view-dog-profiles")}>
          View Dog Profiles
        </Doggo.menu_item>
      </:item>
      <:item>
        <Doggo.menu_item on_click={JS.push("add-dog-profile")}>
          Add Dog Profile
        </Doggo.menu_item>
      </:item>
      <:item>
        <Doggo.menu_item on_click={JS.push("dog-care-tips")}>
          Dog Care Tips
        </Doggo.menu_item>
      </:item>
    </Doggo.menu>
  </:item>
  <:item role="separator"></:item>
  <:item>
    <Doggo.menu_item on_click={JS.dispatch("myapp:help")}>
      Help
    </Doggo.menu_item>
  </:item>
</Doggo.menu_bar>

Attributes

label (:string) - A accessibility label for the menubar. Set as aria-label attribute.
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
labelledby (:string) - The DOM ID of an element that labels this menu bar.
Example:
```
<h3 id="dog-menu-label">Dog Actions</h3>
<Doggo.menu_bar labelledby="dog-menu-label"></Doggo.menu_bar>
```
You should ensure that either the label or the labelledby attribute is set.
Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- role (:string) - Sets the role of the list item. If the item has a menu item, group, menu item radio group or menu item checkbox as a child, use "none". If you want to render a visual separator, use "separator". The default is "none". Must be one of "none", or "separator".

menu_button(assigns)

(since 0.5.0)

Renders a button that toggles an actions menu.

This component can be used on its own or as part of a menu_bar/1 or menu/1. See also menu_item/1, menu_item_checkbox/1, and menu_group/1.

For a button that toggles the visibility of an element that is not a menu, use disclosure_button/1. For a button that toggles other states, use toggle_button/1. See also button/1 and button_link/1.

Examples

Set the controls attribute to the DOM ID of the element that you want to toggle with the button.

The initial state is hidden. Do not forget to add the hidden attribute to the toggled menu. Otherwise, visibility of the element will not align with the aria-expanded attribute of the button.

<div>
  <Doggo.menu_button controls="actions-menu" id="actions-button">
    Actions
  </Doggo.menu_button>

  <Doggo.menu id="actions-menu" labelledby="actions-button" hidden>
    <:item>
      <Doggo.menu_item on_click={JS.push("view-dog-profiles")}>
        View Dog Profiles
      </Doggo.menu_item>
    </:item>
    <:item>
      <Doggo.menu_item on_click={JS.push("add-dog-profile")}>
        Add Dog Profile
      </Doggo.menu_item>
    </:item>
    <:item>
      <Doggo.menu_item on_click={JS.push("dog-care-tips")}>
        Dog Care Tips
      </Doggo.menu_item>
    </:item>
  </Doggo.menu>
</div>

If this menu button is a child of a menu_bar/1 or a menu/1, set the menuitem attribute.

<Doggo.menu id="actions-menu">
  <:item>
    <Doggo.menu_button controls="actions-menu" id="actions-button" menuitem>
      Dog Actions
    </Doggo.menu_button>
    <Doggo.menu id="dog-actions-menu" labelledby="actions-button" hidden>
      <:item><!-- ... --></:item>
    </Doggo.menu>
  </:item>
  <:item><!-- ... --></:item>
</Doggo.menu>

Attributes

id (:string) (required) - The DOM ID of the button. Set the aria-labelledby attribute of the toggled menu to the same value.
controls (:string) (required) - The DOM ID of the element that this button controls.
menuitem (:boolean) - Set this attribute to true if the menu button is used as a child of a menu_bar/1. This ensures that the role is set to menuitem.
Defaults to false.
Global attributes are accepted.

Slots

inner_block (required)

menu_group(assigns)

(since 0.5.0)

This component can be used to group items within a menu/1 or menu_bar/1.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Focus management
Keyboard support

Example

<Doggo.menu id="actions-menu" labelledby="actions-button" hidden>
  <:item>
    <Doggo.menu_group label="Dog actions">
      <:item>
        <Doggo.menu_item on_click={JS.push("view-dog-profiles")}>
          View Dog Profiles
        </Doggo.menu_item>
      </:item>
      <:item>
        <Doggo.menu_item on_click={JS.push("add-dog-profile")}>
          Add Dog Profile
        </Doggo.menu_item>
      </:item>
      <:item>
        <Doggo.menu_item on_click={JS.push("dog-care-tips")}>
          Dog Care Tips
        </Doggo.menu_item>
      </:item>
    </Doggo.menu_group>
  </:item>
  <:item role="separator" />
  <:item>
    <Doggo.menu_item on_click={JS.push("help")}>Help</Doggo.menu_item>
  </:item>
</Doggo.menu>

Attributes

label (:string) (required) - A accessibility label for the group. Set as aria-label attribute.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- role (:string) - Sets the role of the list item. If the item has a menu item, menu item radio group or menu item checkbox as a child, use "none". If you want to render a visual separator, use "separator". The default is "none". Must be one of "none", or "separator".

menu_item(assigns)

(since 0.5.0)

Renders a button that acts as a menu item within a menu/1 or menu_bar/1.

A menu item is meant to be used to trigger an action. For a button that toggles the visibility of a menu, use menu_button/1.

Example

<Doggo.menu label="Actions">
  <:item>
    <Doggo.menu_item on_click={JS.dispatch("myapp:copy")}>
      Copy
    </Doggo.menu_item>
  </:item>
  <:item>
    <Doggo.menu_item on_click={JS.dispatch("myapp:paste")}>
      Paste
    </Doggo.menu_item>
  </:item>
</Doggo.menu>

Attributes

on_click (Phoenix.LiveView.JS) (required)
Global attributes are accepted.

Slots

inner_block (required)

menu_item_checkbox(assigns)

(since 0.5.0)

Renders a menu item checkbox as part of a menu/1 or menu_bar/1.

Example

<Doggo.menu label="Actions">
  <:item>
    <Doggo.menu_item_checkbox on_click={JS.dispatch("myapp:toggle-word-wrap")}>
      Word wrap
    </Doggo.menu_item_checkbox>
  </:item>
</Doggo.menu>

Attributes

checked (:boolean) - Defaults to false.
on_click (Phoenix.LiveView.JS) (required)
Global attributes are accepted.

Slots

inner_block (required)

menu_item_radio_group(assigns)

(since 0.5.0)

Renders a group of menu item radios as part of a menu/1 or menu_bar/1.

In Development
The necessary JavaScript for making this component fully functional and accessible will be added in a future version.
Missing features
Focus management
State management
Keyboard support

Example

<Doggo.menu id="actions-menu" labelledby="actions-button" hidden>
  <:item>
    <Doggo.menu_item_radio_group label="Theme">
      <:item on_click={JS.dispatch("switch-theme-light")}>
        Light
      </:item>
      <:item on_click={JS.dispatch("switch-theme-dark")} checked>
        Dark
      </:item>
    </Doggo.menu_item_radio_group>
  </:item>
</Doggo.menu>

Attributes

label (:string) (required) - A accessibility label for the group. Set as aria-label attribute.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- checked (:boolean)
- on_click (Phoenix.LiveView.JS)

Navigation

app_bar(assigns)

(since 0.1.0)

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

Usage

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

Attributes

title (:string) - The page title. Will be set as h1. Defaults to nil.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

navigation - Slot for a single button left of the title, typically used for a menu button that toggles a drawer, or for a back link.Accepts attributes:
- label (:string) (required)
- on_click (:any) (required) - Event name or Phoenix.LiveView.JS command.
action - Slot for action buttons right of the title. Accepts attributes:
- label (:string) (required)
- on_click (:any) (required) - Event name or Phoenix.LiveView.JS command.

bottom_navigation(assigns)

(since 0.3.0)

Renders a navigation that sticks to the bottom of the screen.

Example

<Doggo.bottom_navigation current_value={@view}>
  <:item
    label="Profile"
    navigate={~p"/pets/#{@pet}"}
    value={Profile}
  >
    <Lucideicons.user aria-hidden="true" />
  </:item>
  <:item
    label="Appointments"
    navigate={~p"/pets/#{@pet}/appointments"}
    value={Appointments}
  >
    <Lucideicons.calendar_days aria-hidden="true" />
  </:item>
  <:item
    label="Messages"
    navigate={~p"/pets/#{@pet}/messages"}
    value={Messages}
  >
    <Lucideicons.mails aria-hidden="true" />
  </:item>
</Doggo.bottom_navigation>

Attributes

label (:string) - Label for the <nav> element. The label is especially important if you have multiple <nav> elements on the same page. If the page is localized, the label should be translated, too. Do not include "navigation" in the label, since screen readers will already announce the "navigation" role as part of the label.
Defaults to nil.
current_value (:any) (required) - The current value used to compare the item values with. This could be the current LiveView module, or the live action.
hide_labels (:boolean) - Hides the labels of the individual navigation items. Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Slot for the navigation items. The inner content should be used to render an icon.Accepts attributes:
- label (:string) - Required label for the navigation items. The item labels can be visually hidden with the hide_labels attribute on the component.
- href (:string) - Passed to Phoenix.Component.link/1.
- navigate (:string) - Passed to Phoenix.Component.link/1.
- patch (:string) - Passed to Phoenix.Component.link/1.
- value (:any) - The value of the item is compared to the current_value attribute to determine whether to add the aria-current attribute. This can be a single value or a list of values, e.g. multiple live actions for which the item should be marked as current.

breadcrumb(assigns)

(since 0.1.0)

Renders a breadcrumb navigation.

<Doggo.breadcrumb>
  <:item patch="/categories">Categories</:item>
  <:item patch="/categories/1">Reviews</:item>
  <:item patch="/categories/1/articles/1">The Movie</:item>
</Doggo.breadcrumb>

label (:string) - The aria label for the <nav> element. Defaults to "Breadcrumb".
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

item (required) - Accepts attributes:
- navigate (:string)
- patch (:string)
- href (:string)

navbar(assigns)

(since 0.1.0)

Renders a navigation bar.

Usage

<Doggo.navbar>
  <:brand><.link navigate={~p"/"}>Pet Clinic</.link></:brand>
  <Doggo.navbar_items>
    <:item><.link navigate={~p"/about"}>About</.link></:item>
    <:item><.link navigate={~p"/services"}>Services</.link></:item>
    <:item>
      <.link navigate={~p"/login"} class="button">Log in</.link>
    </:item>
  </Doggo.navbar_items>
</Doggo.navbar>

You can place multiple navigation item lists in the inner block. If the .navbar is styled as a flex box, you can use the CSS order property to control the display order of the brand and lists.

<Doggo.navbar>
  <:brand><.link navigate={~p"/"}>Pet Clinic</.link></:brand>
  <Doggo.navbar_items class="navbar-main-links">
    <:item><.link navigate={~p"/about"}>About</.link></:item>
    <:item><.link navigate={~p"/services"}>Services</.link></:item>
  </Doggo.navbar_items>
  <Doggo.navbar_items class="navbar-user-menu">
    <:item>
      <Doggo.button_link navigate={~p"/login"}>Log in</Doggo.button_link>
    </:item>
  </Doggo.navbar_items>
</Doggo.navbar>

If you have multiple <nav> elements on your page, it is recommended to set the aria-label attribute.

<Doggo.navbar aria-label="main navigation">
  <!-- ... -->
</Doggo.navbar>

Attributes

label (:string) (required) - Aria label for the <nav> element (e.g. "Main"). The label is especially important if you have multiple <nav> elements on the same page. If the page is localized, the label should be translated, too. Do not include "navigation" in the label, since screen readers will already announce the "navigation" role as part of the label.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

brand - Slot for the brand name or logo.
inner_block (required) - Slot for navbar items. Use the navbar_items component here to render navigation links or other controls.

navbar_items(assigns)

(since 0.1.0)

Renders a list of navigation items.

Meant to be used in the inner block of the navbar component.

Usage

<Doggo.navbar_items>
  <:item><.link navigate={~p"/about"}>About</.link></:item>
  <:item><.link navigate={~p"/services"}>Services</.link></:item>
  <:item>
    <.link navigate={~p"/login"} class="button">Log in</.link>
  </:item>
</Doggo.navbar_items>

Attributes

class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - A navigation item, usually a link or a button. Accepts attributes:
- class (:string) - A class for the <li>.

steps(assigns)

(since 0.3.0)

Renders a navigation for form steps.

Examples

With patch navigation:

<Doggo.steps current_step={0}>
  <:step on_click={JS.patch(to: ~p"/form/step/personal-information")}>
    Profile
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/delivery")}>
    Delivery
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/confirmation")}>
    Confirmation
  </:step>
</Doggo.steps>

With push events:

<Doggo.steps current_step={0}>
  <:step on_click={JS.push("go-to-step", value: %{step: "profile"})}>
    Profile
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "delivery"})}>
    Delivery
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "confirmation"})}>
    Confirmation
  </:step>
</Doggo.steps>

Attributes

label (:string) - Defaults to "Form steps".
current_step (:integer) (required) - The current form step, zero-based index.
completed_label (:string) - Visually hidden text that is rendered for screen readers for completed steps.
Defaults to "Completed: ".
linear (:boolean) - If true, clickable links are only rendered for completed steps.
If false, also upcoming steps are clickable.
If you don't want any clickable links to be rendered, omit the on_click attribute on the :step slots.
Defaults to false.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

step (required) - Accepts attributes:
- on_click (:any) - Event name or Phoenix.LiveView.JS command to execute when clicking on the step.

tab_navigation(assigns)

(since 0.2.0)

Renders navigation tabs.

This component is meant for tabs that link to a different view or live action. If you want to render tabs that switch between in-page content panels, use tabs/1 instead.

Example

<Doggo.tab_navigation current_value={@live_action}>
  <:item
    patch={~p"/pets/#{@pet}"}
    value={[:show, :edit]}
  >
    Profile
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/appointments"}
    value={:appointments}
  >
    Appointments
  </:item>
  <:item
    patch={~p"/pets/#{@pet}/messages"}
    value={:messages}
  >
    Messages
  </:item>
</Doggo.tab_navigation>

Attributes

label (:string) - Aria label for the <nav> element. The label is especially important if you have multiple <nav> elements on the same page. If the page is localized, the label should be translated, too. Do not include "navigation" in the label, since screen readers will already announce the "navigation" role as part of the label.
Defaults to "Tabs".
current_value (:any) (required) - The current value used to compare the item values with. If you use this component to patch between different view actions, this could be the @live_action attribute.
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

item (required) - Accepts attributes:
- href (:string) - Passed to Phoenix.Component.link/1.
- navigate (:string) - Passed to Phoenix.Component.link/1.
- patch (:string) - Passed to Phoenix.Component.link/1.
- value (:any) - The value of the item is compared to the current_value attribute to determine whether to add the aria-current attribute. This can be a single value or a list of values, e.g. multiple live actions for which the item should be marked as current.

vertical_nav(assigns)

(since 0.5.0)

Renders a vertical navigation menu.

It is commonly placed within drawers or sidebars.

For hierarchical menu structures, use vertical_nav_nested/1 within the :item slot.

To include sections in your drawer or sidebar that are not part of the navigation menu (like informational text or a site search), use the vertical_nav_section/1 component.

Example

<Doggo.vertical_nav label="Main">
  <:item>
    <.link navigate={~p"/dashboard"}>Dashboard</.link>
  </:item>
  <:item>
    <Doggo.vertical_nav_nested>
      <:title>Content</:title>
      <:item current_page>
        <.link navigate={~p"/posts"}>Posts</.link>
      </:item>
      <:item>
        <.link navigate={~p"/comments"}>Comments</.link>
      </:item>
    </Doggo.vertical_nav_nested>
  </:item>
</Doggo.vertical_nav>

Attributes

id (:string) - Defaults to nil.
label (:string) (required)
Global attributes are accepted. Any additional HTML attributes.

Slots

title - An optional slot for the title of the menu.
item (required) - Items. Accepts attributes:
- class (:string)
- current_page (:boolean)

vertical_nav_nested(assigns)

(since 0.5.0)

Renders nested navigation items within the :item slot of the vertical_nav/1 component.

Example

<Doggo.vertical_nav label="Main">
  <:item>
    <Doggo.vertical_nav_nested>
      <:title>Content</:title>
      <:item current_page>
        <.link navigate={~p"/posts"}>Posts</.link>
      </:item>
      <:item>
        <.link navigate={~p"/comments"}>Comments</.link>
      </:item>
    </Doggo.vertical_nav_nested>
  </:item>
</Doggo.vertical_nav>

Attributes

id (:string) (required)

Slots

title - An optional slot for the title of the nested menu section.
item (required) - Items. Accepts attributes:
- class (:string)
- current_page (:boolean)

vertical_nav_section(assigns)

(since 0.5.0)

Renders a section within a sidebar or drawer that contains one or more items which are not navigation links.

To render navigation links, use vertical_nav/1 instead.

Example

<Doggo.vertical_nav_section>
  <:title>Search</:title>
  <:item><input type="search" placeholder="Search" /></:item>
</Doggo.vertical_nav_section>

Attributes

id (:string) (required)
class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].
Global attributes are accepted. Any additional HTML attributes.

Slots

title - An optional slot for the title of the section.
item (required) - Items. Accepts attributes:
- class (:any) - Additional CSS classes. Can be a string or a list of strings.

Functions

hide_modal(js \\ %JS{}, id)

(since 0.1.0)

Hides the modal with the given ID.

Example

<.link phx-click={hide_modal("pet-modal")}>hide</.link>

show_modal(js \\ %JS{}, id)

(since 0.1.0)

Shows the modal with the given ID.

Example

<.link phx-click={show_modal("pet-modal")}>show</.link>

show_tab(js \\ %JS{}, id, index)

(since 0.5.0)

Shows the tab with the given index of the tabs/1 component with the given ID.

Example

Doggo.show_tab("my-tabs", 2)

View Source Doggo (Doggo v0.5.0)

Summary

Components

Buttons

Form

Menu

Navigation

Functions

Components

accordion(assigns)

Example

Attributes

Slots

action_bar(assigns)

In Development

Example

Attributes

Slots

alert(assigns)

Examples

Attributes

Slots

alert_dialog(assigns)

Usage

CSS

Semantics

Attributes

Slots

avatar(assigns)

Example

Attributes

badge(assigns)

Examples

Attributes

Slots

box(assigns)

Example

Attributes

Slots

callout(assigns)

Example

Attributes

Slots

card(assigns)

Usage

Attributes

Slots

carousel(assigns)

In Development

Example

Attributes

Slots

cluster(assigns)

Example

Attributes

Slots

combobox(assigns)

In Development

Example

Attributes

date(assigns)

Examples

Attributes

datetime(assigns)

Examples

Attributes

drawer(assigns)

Example

Attributes

Slots

fallback(assigns)

Examples

Attributes

flash_group(assigns)

Hidden attribute

Examples

Attributes

frame(assigns)

Example

Attributes