Halogen.Widgets.VAccordion
- Package
- purescript-halogen-widgets
- Repository
- afcondon/purescript-halogen-widgets
A vertical disclosure header — the reference instance of the library
contract (see CONTRACT.md). Panels stack top-to-bottom; the header is
always a full-width horizontal bar, and collapsing hides the parent's body
and flips the chevron (▾ → ▸). This is the common web accordion, and the
one to reach for unless you are laying panels out as side-by-side columns
(then use HAccordion).
The PARENT owns open and renders the panel BODY itself
(if open then [body] else []). A multi-panel accordion is N of these
sharing a parent-owned open-set (exactly Triggerfish's
collapsed :: Array String).
Re-exports from Halogen.Widgets.Accordion.Internal
#defaultInput Source
defaultInput :: String -> InputA sensible starting Input; override the fields you care about.
The 120 ms default coalesces a double-dispatched click into one Toggled.
motion defaults to NoMotion — the header snaps, as it always has; opt
into eased chevron rotation by overriding it (and pair with Accordion.body
for an eased body reveal).
#body Source
body :: forall w i. { motion :: Motion, open :: Boolean } -> Array (HTML w i) -> HTML w iTier-2 chrome (CONTRACT.md rule 5): an OPTIONAL animated wrapper for the
panel body the parent renders. The accordion component is only the
header; the body has always been the parent's, written
if open then [body] else []. That form unmounts the body when collapsed,
which is exactly why it cannot animate. body keeps the content mounted
and eases its height with the CSS grid-rows 0fr↔1fr trick, so it slides.
The trade-off, made explicit: the body stays in the DOM while collapsed
(at height 0). For a presentational body that costs nothing; for a body of
live, expensive children, weigh it — the plain if open then … unmount is
still the right call when you want the collapsed body genuinely gone, and is
lighter when you are not animating at all. Reach for body when you want
the reveal eased (pass the same motion you gave the header).
It is action-polymorphic, like Panel/Modal: your body content threads
straight through, so it carries your interactive children untouched.
- Modules
- Halogen.
Widgets. Accordion. Internal - Halogen.
Widgets. Compare - Halogen.
Widgets. DoubleKnob - Halogen.
Widgets. Field - Halogen.
Widgets. HAccordion - Halogen.
Widgets. Knob - Halogen.
Widgets. Modal - Halogen.
Widgets. Motion - Halogen.
Widgets. Panel - Halogen.
Widgets. SegmentedControl - Halogen.
Widgets. Select - Halogen.
Widgets. Slider - Halogen.
Widgets. Stepper - Halogen.
Widgets. Style - Halogen.
Widgets. Toast - Halogen.
Widgets. Toggle - Halogen.
Widgets. VAccordion