View Source Doggo (Doggo v0.1.1)

Collection of Phoenix Components.

Summary

Components

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

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

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

Renders a breadcrumb navigation.

Renders a button.

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

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

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

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

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

Renders a navigation menu as a drawer section.

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

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

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

Renders the description of an input.

Renders the errors for an input.

Shows the flash messages as alerts.

Renders a customizable icon using a slot for SVG content.

Renders an icon using an SVG sprite.

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

Renders the label for an input.

Renders a modal.

Renders a navigation bar.

Renders a list of navigation items.

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

Renders a switch as a button.

Renders a simple table.

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

Layouts

Applies a vertical margin between the child elements.

Functions

Hides the modal with the given ID.

Shows the modal with the given ID.

Components

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

It is typically positioned to float above other content.

Example

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

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

Attributes

  • id (:string) - Defaults to nil.

  • level (:atom) - Semantic level of the alert. Defaults to :info.

  • title (:string) - An optional title. Defaults to nil.

  • on_close (Phoenix.LiveView.JS) - 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.

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

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>

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:
  • action - Slot for action buttons right of the title. Accepts attributes:

Renders a button.

Examples

<.button>Confirm</.button>

<.button type="submit" variant={:secondary} size={:medium} shape={:pill}>
  Submit
</.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)

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

Examples

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

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

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.

  • 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)

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.

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:

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

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

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

Examples

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

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

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

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

Within the slots, you can use the drawer_nav/1 and drawer_section/1 components.

Example

<.drawer>
  <:brand>
    <.link navigate={~p"/"}>App</.link>
  </:brand>
  <:top>
    <.drawer_nav aria-label="Main navigation">
      <:item>
        <.link navigate={~p"/dashboard"}>Dashboard</.link>
      </:item>
      <:item>
        <.drawer_nested_nav>
          <:title>Content</:title>
          <:item current_page>
            <.link navigate={~p"/posts"}>Posts</.link>
          </:item>
          <:item>
            <.link navigate={~p"/comments"}>Comments</.link>
          </:item>
        </.drawer_nested_nav>
      </:item>
    </.drawer_nav>
    <.drawer_section>
      <:title>Search</:title>
      <:item><input type="search" placeholder="Search" /></:item>
    </.drawer_section>
  </:top>
  <:bottom>
    <.drawer_nav aria-label="User menu">
      <:item>
        <.link navigate={~p"/settings"}>Settings</.link>
      </:item>
      <:item>
        <.link navigate={~p"/logout"}>Logout</.link>
      </:item>
    </.drawer_nav>
  </:bottom>
</.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

  • brand - Optional slot for the brand name or logo.

  • top - Slot for content that is rendered after the brand, at the start of the side bar.

  • bottom - Slot for content that is rendered at the end of the drawer, pinned to the bottom, if there is enough room.

Renders a navigation menu as a drawer section.

This component must be placed within the :top or :bottom slot of the drawer/1 component.

To nest the navigation, use the drawer_nested_nav/1 component within the :item slot.

To render a drawer section that is not a navigation menu, use drawer_section/1 instead.

Example

<.drawer_nav aria-label="Main navigation">
  <:item>
    <.link navigate={~p"/dashboard"}>Dashboard</.link>
  </:item>
  <:item>
    <.drawer_nested_nav>
      <:title>Content</:title>
      <:item current_page>
        <.link navigate={~p"/posts"}>Posts</.link>
      </:item>
      <:item>
        <.link navigate={~p"/comments"}>Comments</.link>
      </:item>
    </.drawer_nested_nav>
  </:item>
</.drawer_nav>

Attributes

  • Global attributes are accepted. Any additional HTML attributes.

Slots

  • title - An optional slot for the title of the menu.
  • item (required) - Items. Accepts attributes:
    • current_page (:boolean)
Link to this function

drawer_nested_nav(assigns)

View Source

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

Example

<.drawer_nav aria-label="Main navigation">
  <:item>
    <.drawer_nested_nav>
      <:title>Content</:title>
      <:item current_page>
        <.link navigate={~p"/posts"}>Posts</.link>
      </:item>
      <:item>
        <.link navigate={~p"/comments"}>Comments</.link>
      </:item>
    </.drawer_nested_nav>
  </:item>
</.drawer_nav>

Slots

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

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

To render a drawer navigation, use drawer_nav/1 instead.

Example

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

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

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:

<.fallback value={@some_value} />

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

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

Set a custom placeholder and text for screen readers:

<.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".

Link to this function

field_description(assigns)

View Source

Renders the description of an input.

Attributes

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

Renders the errors for an input.

Attributes

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

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

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - The map of flash messages.
  • info_title (:string) - Defaults to "Success".
  • error_title (:string) - Defaults to "Error".
  • id (:string) - An optional ID for the container. Defaults to nil.
  • class (:any) - An optional class name. Defaults to "stack".
  • Global attributes are accepted. Any additional HTML attributes.

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:

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

To display the text visibly:

<.icon label="report bug" label_placement={:right}>
  <Heroicons.bug_ant />
</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 - Slot for the SVG element.

Renders an icon using an SVG sprite.

Examples

Render an icon with text as aria-label:

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

To display the text visibly:

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

  • class (:any) - Additional CSS classes. Can be a string or a list of strings. Defaults to [].

  • Global attributes are accepted. Any additional HTML attributes.

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

Examples

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

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

<.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) - Defaults to nil.

  • value (:any)

  • type (:string) - Defaults to "text".

  • field (Phoenix.HTML.FormField) - A form field struct, for example: @form[:name].

  • errors (:list) - Defaults to [].

  • 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.

  • prompt (:string) - An optional prompt for select elements. Defaults to nil.

  • options (:list) - A list of options for a select element or a radio group. See Phoenix.HTML.Form.options_for_select/2. Note that the checkbox group and radio group do not support nesting.

  • multiple (:boolean) - Sets the multiple attribute on a select element to allow selecting multiple options.

    Defaults to false.

  • 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.

Renders the label for an input.

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.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a modal.

Usage

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

With URL

To toggle the modal visibility based on the URL:

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

Example

<.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>
</.modal>

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

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

Without URL

To toggle the modal visibility dynamically with the open attribute:

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

Example

<.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>
</.modal>

To open modal, use the show_modal function.

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

CSS

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;
}

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 modal as open. Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • 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

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

Example

<.property_list>
  <:prop label={gettext("Name")}>George</:prop>
  <:prop label={gettext("Age")}>42</:prop>
</.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)

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

<.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) (required)
  • Global attributes are accepted.

Renders a simple table.

Examples

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

Attributes

  • id (:string) (required)

  • items (: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 (Phoenix.LiveView.JS) - 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 (:string) - 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 (:string) - 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>

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:

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

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

Layouts

Applies a vertical margin between the child elements.

Example

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

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

<.stack recursive={true}>
  <div>
    <div>some nested block</div>
    <div>another nested block</div>
  </div>
  <div>some other block</div>
</.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)

Functions

Link to this function

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

View Source

Hides the modal with the given ID.

Example

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

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

View Source

Shows the modal with the given ID.

Example

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