1.8.1 Procedures

Procedure: avatar-group avatars KEY: #:max #:size #:total #:label #:classes ¶

Stack several avatars into one group, with an overflow count.

The group shows max faces and then how many more there are. The overflow is text, not an avatar, so it is read out as a count rather than as a person; the group carries an optional accessible label so a screen reader knows what the row of faces represents.

avatars

A list of avatar nodes.

max

How many avatars to show before the overflow badge. Defaults to 4.

size

The size of the overflow badge’s text. Defaults to 'md.

total

The real number of people, when avatars is a truncated list. Defaults to the length of avatars.

label

An optional accessible name for the group.

classes

Extra classes for the group.

(avatar-group (list (avatar #:src "a.png" #:alt "Ada")
                    (avatar #:src "b.png" #:alt "Grace")))

Procedure: chip content KEY: #:variant #:size #:href #:icon #:remove-href #:remove-label #:classes ¶

Create a small tag or chip, optionally removable.

A chip is a badge that belongs to the content rather than to a status: a topic on a post, a filter that is on, a recipient in a compose window. It can be a link (a filter that navigates to its own removal) and it can carry a remove control, which is also a link, so removing a filter is a plain navigation and works with scripting off.

content

The chip’s label.

variant

'neutral (default), 'info, 'success, 'warning or 'danger.

size

'sm, 'md or 'lg.

href

An optional destination, turning the chip into a link.

icon

An optional Phosphor icon name.

remove-href

An optional URL that removes the chip.

remove-label

The accessible name of the remove control.

classes

Extra classes for the chip.

(chip "Scheme" #:variant 'info)
(chip "Draft" #:remove-href "/posts/1?remove=draft")

Procedure: timeline items KEY: #:label #:classes ¶

Create an ordered history from timeline-item nodes.

The list is an <ol>, because a timeline is order rather than a set, and the order is what the reader came for.

items

A list of timeline-item nodes.

label

The accessible name of the list.

classes

Extra classes for the wrapper.

(timeline (list (timeline-item #:time "11 Oct" #:title "Deployed")))

Procedure: timeline-item KEY: #:time #:datetime #:title #:body #:icon #:variant #:current? ¶

Create one entry of a timeline.

The marker is decorative, the time is marked up as a real <time> with its machine-readable value, and the entry’s heading says what happened. The current entry carries aria-current="step", which is how a reader learns where in the history the page is.

time

The human-readable time shown beside the marker.

datetime

The ISO value for the <time> element.

title

The entry’s heading.

body

Optional detail below the heading.

icon

An optional Phosphor icon name shown in the marker.

variant

'neutral (default), 'info, 'success, 'warning or 'danger.

current?

Whether this is the entry in progress.

(timeline-item #:time "11 Oct" #:title "Deployed")

Procedure: tree-item label KEY: #:href #:children #:open #:icon #:classes ¶

Create one node of a tree-view.

A node with children is a native <details>, so the tree opens and closes with no script; a leaf is a link. That combination is the smallest thing that is both a hierarchy and a set of destinations, and it stays usable when the browser cannot run a tree widget’s keyboard model.

label

The node’s text.

href

The destination for a leaf node.

children

Child tree-item nodes, for a branch.

open

Whether a branch starts open.

icon

An optional Phosphor icon name.

classes

Extra classes for the node.

(tree-item "Docs" #:children (list (tree-item "Install" #:href "/install")))

Procedure: tree-view KEY: #:items #:label #:classes ¶

Create a navigable hierarchy from tree-item nodes.

items

A list of tree-item nodes.

label

The accessible name of the tree’s navigation region.

classes

Extra classes for the wrapper.

(tree-view #:items (list (tree-item "Docs"
                                    #:children (list (tree-item "Install"
                                                                #:href "/install")))))