PhoenixPaper.ListItem (PhoenixPaper v0.1.0)

Copy Markdown View Source

A Material Design list item (pp_list_item/1) — for inside PhoenixPaper.List, but also usable on its own (e.g. inside a PhoenixPaper.Card).

Renders as a Phoenix.Component.link/1 (so href/navigate/patch all work) when any of those are set, or a plain <div> otherwise — a static info row doesn't need to be a link. Whether an item is "active" isn't derived automatically (this is a stateless function component with no knowledge of the current request) — the caller passes active based on its own route, e.g. active={@current_path == "/settings"}.

active also sets aria-current="page" — besides being the correct ARIA for "this is the current page in a navigation list" on its own, PhoenixPaper.Drawer's colored variants key off this exact attribute to restyle the active item's highlight for contrast against a colored drawer background (see its moduledoc).

Ripples on click/tap by default when it's a link (see PhoenixPaper.Ripple) — ripple has no effect on a non-link item, since there's nothing to click.

Summary

Functions

Renders a list item. See the module doc.

Functions

pp_list_item(assigns)

Renders a list item. See the module doc.

Attributes

  • href (:any) - Defaults to nil.
  • navigate (:any) - Defaults to nil.
  • patch (:any) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • ripple (:boolean) - the Material ripple effect on click/tap — off whenever paperize is false, see PhoenixPaper.Ripple. Defaults to true.
  • disabled (:boolean) - Defaults to false.
  • paperize (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • leading - an icon or avatar.
  • inner_block (required) - the primary line of text.
  • secondary - a secondary line of text below the primary one.
  • trailing - a trailing icon, badge, or action.