DevactionUI.Accordion (devaction_ui v0.2.3)

Copy Markdown View Source

Sections that open and close. Built on <details>, so it works with the keyboard, in assistive technology and with no JavaScript. In exclusive mode (the default) opening one closes the others, which the browser does itself through the shared name of the <details>.

Variants: :group is a bordered block with dividers and a chevron at the start; :flush is bare rows with a line under each and a plus that stays a plus; :plain is the canvas's default accordion, dividers and a chevron at the end that turns (chevron: :start moves it to the start, as in the nested accordion of the canvas); :card gives each section its own card, with a chevron, a lead (an icon, a score), a sub line, a tag and actions in the header. The actions of a :card sit beside the header, not inside the <summary>, so pressing them does not open or close the section.

A section can hold another accordion: nest a :plain one in the panel of a :plain or :card section and it indents 28px with a rule. A disabled section is drawn as a row that cannot be focused or opened, by pointer or by keyboard.

The <summary> has no heading level of its own; heading_level wraps each title in an <h2> to <h6>.

Summary

Functions

accordion(assigns)

Sections that open and close.

Functions

accordion(assigns)

@spec accordion(map()) :: Phoenix.LiveView.Rendered.t()

Sections that open and close.

Attributes

  • id (:string) (required) - also the name that makes the sections exclusive.
  • variant (:atom) - the look of the sections; see the module doc. Defaults to :group. Must be one of :group, :flush, :plain, or :card.
  • exclusive (:boolean) - opening a section closes the others; false lets several stay open. Defaults to true.
  • chevron (:atom) - :start puts the chevron of a :plain accordion before the title; the others already do. Defaults to :default. Must be one of :default, or :start.
  • heading_level (:integer) - wraps each title in <h2>..<h6>; none by default. Defaults to nil. Must be one of nil, 2, 3, 4, 5, or 6.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - one section; its content is the panel. Accepts attributes:
    • title (:string) (required)
    • subtitle (:string) - a line under the title (:card).
    • count (:any) - a small pill with a count beside the title.
    • count_tone (:atom) - the tone of the count pill: risk, warn, ok, info or neutral.
    • tag (:string) - a tag in the header (:card).
    • tone (:atom) - the tone of the tag: risk, warn, ok, info or neutral.
    • open (:boolean) - open on first render.
    • disabled (:boolean) - a section that cannot be opened yet.
  • lead - what sits before the title of a :card; gets %{index: n, title: text}.
  • actions - what sits beside the header of a :card; gets %{index: n, title: text}.