1.9.1 Procedures

Procedure: accordion KEY: #:items #:accordion-classes ¶

Stack several accordion-item rows into a JavaScript-free accordion.

Because each row is a native details element, the whole accordion expands and collapses without any scripting.

items

A list of accordion-item or details nodes.

accordion-classes

List of symbols representing the wrapper CSS classes.

(accordion #:items (list (accordion-item #:summary "A" #:content (list (p "Alpha")))
                        (accordion-item #:summary "B" #:content (list (p "Beta")))))

Procedure: accordion-item KEY: #:summary #:content #:open ¶

Create a single accordion row backed by a native details element.

summary

The always-visible row title.

content

The collapsible row body.

open

A boolean expanding the row by default.

(accordion-item #:summary "How do I install it?" #:content (list (p "Use Guix.")))

Procedure: details content KEY: #:summary #:open #:details-classes #:body-classes ¶

Create a native HTML <details> disclosure element.

The element expands and collapses with no JavaScript at all, relying on the browser’s built-in disclosure behaviour.

content

The collapsible body content.

summary

The summary caption rendered in the always-visible header. Accepts a string or a summary node.

open

A boolean expanding the disclosure by default.

details-classes

List of symbols representing the wrapper CSS classes.

body-classes

List of symbols representing the collapsible body CSS classes.

(details (list (p "Hidden details")) #:summary "Show more")

Procedure: modal KEY: #:id #:title #:content #:footer #:close-label ¶

Create a modal dialog that opens with no JavaScript.

The modal is revealed by the CSS :target pseudo-class: link to it with an anchor such as (a "Open" #:href "#my-modal") and it appears; follow a link to "#" to dismiss it. The dialog carries the proper role, aria-modal and aria-labelledby attributes so assistive technology announces it, and it keeps working with scripting disabled.

id

The unique element id targeted by the opening link.

title

The dialog title, also used as its accessible name.

content

The dialog body content.

footer

An optional list of action nodes shown at the bottom.

close-label

The accessible label for the close control. Defaults to "Close".

(modal #:id "confirm" #:title "Are you sure?" #:content (list (p "This cannot be undone.")))

Procedure: summary content KEY: #:classes ¶

Create an HTML <summary> disclosure caption for details.

content

The summary text or inline nodes.

classes

List of symbols representing typography CSS classes.

(summary "Advanced options")

Procedure: tooltip content KEY: #:text #:id #:position #:classes ¶

Attach an accessible, JavaScript-free tooltip to inline content.

The tooltip is shown on both hover and keyboard focus through CSS, and its text is exposed twice, each copy for the reader it is for. Sighted hover is served by the data-hg-tooltip attribute the generated ::after bubble reads; assistive technology is served by a real text node the trigger describes itself with, because generated content is not reliably part of the exposed accessibility tree. The text node is visually hidden rather than also drawn, so a hover still produces one bubble and one reading, not two.

content

The trigger content the tooltip is attached to.

text

The tooltip text.

id

A stable HTML identifier for the hidden description, or #f for a generated one. Give one when the page has to name it.

position

Where the tooltip appears: 'top (default), 'bottom, 'left or 'right.

classes

List of additional utility CSS classes.

(tooltip (code "CARGO_HOME") #:text "Where Cargo stores downloaded crates")