A heading that shows or hides the content below it when clicked.
Mirrors Details from @digdir/designsystemet-react.
Details.view
{ summary = [ Html.text "Hvem kan søke?" ]
, content = [ Html.p [] [ Html.text "Alle som er registrert i Enhetsregisteret." ] ]
}
[]A native <details>:
it opens and closes without Elm, and the browser opens it when find-in-page
matches text inside. Stack several for an accordion.
view: the browser tracks whether it is open. Nothing goes in
your model.controlled: your model decides, and clicking the summary
sends a message. Use it to open details from code, or to keep only one
open at a time.<Details> + Summary + Content → Details.view { summary = […], content = […] } []defaultOpen → Details.initiallyOpenopen + onToggle → Details.controlled { open, onToggle, summary, content } []variant="tinted" → Details.tintedDon't set role or aria-expanded on the summary: a polyfill sets them in
browsers that announce <details> badly (Firefox with TalkBack).
Start a view open.
Details.view { summary = summary, content = content } [ Details.initiallyOpen ]A <details class="ds-details"> that is open when open is True.
Clicking the summary, or pressing Enter or Space on it, sends onToggle with
the requested state. So does the browser opening it for find-in-page.
Handle every onToggle. Elm can't undo the browser opening it for
find-in-page: if your model stays closed, the details stays open on screen
until open changes.
Details.controlled
{ open = model.expanded == Just Eligibility
, onToggle = EligibilityToggled
, summary = [ Html.text "Hvem kan søke?" ]
, content = [ eligibility ]
}
[]A tinted background instead of the default surface color.
A
<details class="ds-details">that the browser opens and closes. Starts closed.