Chapter 36
/
Components reference
Components reference
66 built-in elements in eleven groups, each with its signature, its props, its flags, its events and its parts — read from the compiler's registry, so what this page lists is exactly what the checker accepts. Every element is written Name(positional, prop: value).flag { block }.
Layout
Container
Centred wrapper with a maximum width and horizontal padding.
Row
Horizontal flex layout. It stays a row at every width unless .stacks or a responsive direction says otherwise.
Column
A child of the 12-column grid, spanning span columns.
Grid
CSS grid with a fixed number of columns.
Stack
Vertical flex layout.
Spacer
Vertical space; md when no size is given.
Divider
Horizontal rule.
Host
An element handed to somebody else's code, with a lifetime. mount: runs once with the node, update: again whenever the state it reads changes, and cleanup: when the page, branch or list item it belongs to leaves.
Navigation
Navbar
Top navigation bar with brand, links and action areas.
Sidebar
Side navigation. A Sidebar.Item whose to matches the current route is marked .active and aria-current="page".
Link
Client-side navigation link; its label or its block is the link text.
Tabs
Tab strip switching between its pages.
Breadcrumb
Breadcrumb trail. An item without to is the current page.
Menu
Menu opened by a trigger button.
Data display
Card
Card surface with optional header, body and footer sections.
Table
Data table. Cells inside Table.Head render as <th scope="col">; caption is the table's accessible name, visually hidden.
List
List of its children; ordered for a numbered list.
Badge
Small status label.
Tag
Compact chip.
Avatar
A picture of a person, or their initials.
Tooltip
Shows text when its child is hovered or focused.
Form
Input
Text field. With label, hint or error it is a labelled field.
Select
Drop-down of Select.Option children.
Checkbox
Checkbox bound to a boolean state.
Radio
One choice of a group; every radio bound to the same state is one group.
Switch
On/off toggle bound to a boolean state.
Slider
Range input. aria-* arguments reach the input; with aria-valuetext the raw number is not shown beside the track.
DatePicker
Date input.
FileUpload
File input; handle the chosen files in on change.
Form
Groups controls; on submit runs when it is submitted, and the page never navigates away.
Textarea
Several lines of text. With label, hint or error it is a labelled field; with maxLength it counts what is left.
Feedback
Alert
Inline notice; a danger or warning one is announced as an alert.
Toast
Temporary notification.
Modal
Modal <dialog>, opened by a state flag; the browser supplies focus trapping and Escape.
Dialog
Confirmation <dialog>, opened by a state flag.
Spinner
Loading indicator, announced as a status.
Progress
Progress bar; a value that reads state moves with it.
Skeleton
Placeholder shape shown while content loads.
Actions
Media
Image
Image; alt is required for accessibility (rule A01). Given an image the program declares, it becomes a <picture> with every width the build wrote.
Video
Video player. Without captions it draws an A09 warning: a video nobody can hear is a video nobody can follow.
Audio
Audio player. transcript links what was said, which is what a reader who cannot hear it needs.
Icon
One of the built-in SVG icons, rendered inline.
Carousel
Slide track with named controls and dots; optional autoplay.
Typography
Text
A paragraph of text. {…} in the string reads state and stays live.
Heading
Heading; level picks the tag (h2 when none is given).
Code
Inline code, or a code block with block; language: colours it.
Markdown
Markdown text rendered as HTML: headings, paragraphs, lists, quotes, code, links, emphasis. The text is escaped first, so HTML in it is shown, not run.
Unsafe
The one door for markup a page did not write. It has a single part, Unsafe.Html.
Blockquote
Quotation: the text, or its block as the quoted content.
Document
Root of a PDF document.
Section
Groups content with spacing; on the web, a <section>.
Paragraph
Block of text with paragraph spacing.
Header
Repeated at the top of every PDF page; a <header> on the web.
Footer
Repeated at the bottom of every PDF page; a <footer> on the web.
PageBreak
Forces a new PDF page.
Slides
Presentation
Root of a slide deck; its children must be slides.
Slide
One slide, one PDF page; content is top-aligned and clipped at the bottom margin.
TitleSlide
Cover slide: title and subtitle, vertically centred.
SectionSlide
Full-bleed coloured band with a centred label.
TwoColumn
Two equal columns; takes exactly two Container children.
ImageSlide
Image slide with an optional caption.
On every element
Every element takes these props, and the HTML attribute families named on it (aria-*, data-*, and the global attributes such as id, class, title, role, tabindex).
| Prop | Type | Meaning |
|---|---|---|
| animate: | .fadeIn .fadeOut .slideUp .slideDown .slideLeft .slideRight .scaleIn .scaleOut .bounce .shake .pulse .spin .expand .collapse |
Animation played when the element appears |
| exit: | .fadeIn .fadeOut .slideUp .slideDown .slideLeft .slideRight .scaleIn .scaleOut .bounce .shake .pulse .spin .expand .collapse |
Animation played when the element leaves |
| speed: | .fast .normal .slow |
How fast its animation runs |
| duration: | String |
Animation length, e.g. |
| delay: | String |
Wait before the animation starts |
| easing: | .standard .spring .ease .easeIn .easeOut .easeInOut .linear .bouncy .smooth |
How the animation is paced — a named easing, or any CSS timing function |
| stagger: | String |
Delay added per item of a list, e.g. |
| on: | .mount .enterView |
When its animation plays |
| count: | String |
How long the number it shows takes to count to a new value, e.g. |
| shared: | String |
A name this element keeps across a route change, so the browser carries it from one page to the next |
| class: | String |
Classes added beside the engine's, from the project's own stylesheets |
| ref: | State |
A handle on the element, usable as the element: |
Events
on click
The element was clicked or activated
on input
The value changed, on every keystroke
on change
The value was committed
on submit
The form was submitted
on focus
The element received focus
on blur
The element lost focus
on keydown
A key went down; `e.key` names it
on key
One key, named: `on key("ctrl+k") { }`
on keyup
A key came up
on keypress
A character key was pressed
on mouseenter
The pointer entered the element
on mouseleave
The pointer left the element
on dblclick
The element was double-clicked
on contextmenu
The context menu was asked for; `e.preventDefault()` keeps the browser's
on mousedown
A mouse button went down over the element
on mouseup
A mouse button came up over the element
on mousemove
The mouse moved over the element
on mouseover
The pointer moved onto the element or one of its children
on mouseout
The pointer moved off the element or one of its children
on pointerdown
A pointer — mouse, pen or touch — went down
on pointerup
A pointer came up
on pointermove
A pointer moved
on pointerenter
A pointer entered the element
on pointerleave
A pointer left the element
on pointercancel
The browser took the pointer back, for a scroll or a gesture
on touchstart
A finger touched the element
on touchend
A finger left the element
on touchmove
A finger moved across the element
on wheel
The wheel or trackpad scrolled over the element
on scroll
The element's content scrolled
on focusin
The element or something inside it received focus
on focusout
The element or something inside it lost focus
on reset
The form was reset
on invalid
A control failed the browser's own validation
on select
Text in a field was selected
on copy
Something was copied from the element
on cut
Something was cut from the element
on paste
Something was pasted into the element; `e.clipboardData` holds it
on dragstart
The element started being dragged
on drag
The element is being dragged
on dragend
A drag of the element ended
on dragenter
Something dragged entered the element
on dragover
Something dragged is over the element; `e.preventDefault()` allows a drop
on dragleave
Something dragged left the element
on drop
Something was dropped on the element; `e.dataTransfer` holds it
on load
An image, video or frame finished loading
on error
An image, video or script failed to load
on play
A video or audio started playing
on pause
A video or audio paused
on ended
A video or audio reached its end
on timeupdate
A playing video or audio moved on
on animationend
A CSS animation on the element ended
on transitionend
A CSS transition on the element ended
on toggle
A details element opened or closed
Icons
The names Icon(…), IconButton(icon:) and Sidebar.Item(icon:) draw; any other name shows as the word, and the compiler warns.
close
menu
search
home
user
settings
check
plus
minus
edit
trash
star
heart
bell
download
upload
eye
link
calendar
filter
chevron-down
chevron-right
chevron-left
info
warning
arrow-left
arrow-right
logout
copy
sun
moon