Span
Inline text runs inside Text: Text(Span(.config(weight: bold) 'Bold'), ' and plain').
Also written RichText; layr format rewrites these to Span.
Mixed styles in one line
Span styles a run of text inside a Text: a bold word, a coloured price, a struck-out old value. The runs flow and wrap together as one paragraph.
Text(
.config(size: 17, lineHeight: 1.5)
Span(.config(weight: semibold) .obj('Room B'))
' is free at '
Span(.config(color: accent, weight: semibold) .obj('10:30'))
' for '
Span(.config(color: faint, strike: true) .obj('€60'))
' '
Span(.config(weight: semibold) .obj('€48'))
'.'
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
size (fontSize) | len | Font size in design px. | |
font (fontFamily) | txt | Font family, e.g. 'Geist'. | |
weight (fontWeight, wight) | thin | light | regular | medium | semibold | bold | black | Font weight: thin…black or 100–900. | |
italic (italics) | bool | Italic style. | |
color | paint | Text colour (a gradient paints the glyphs). | |
align (textAlign, textAlight, alignment) | left | mid | right | start | end | justify | Text alignment. | |
lineHeight | num | Line height as a multiple of the font size. | |
letterSpacing | len | Space between letters. | |
underline | bool | Underline. | |
underlinePos | auto | under | baseline | Underline position. | |
underlineSkipInk | bool | true | Skip descenders when underlining. |
strike | bool | Strike-through. | |
transform | none | upper | lower | capitalize | Case transform. | |
overflow | wrap | ellipsis | fade | scale | clip | wrap | Long text: wrap (default), ellipsis, fade, scale or clip. |
selectable | bool | true | Allow selection. |
baseline (textBaseline) | top | mid | bottom | baseline | Vertical alignment inside a line. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.objs: several objects, the default slot
Events
.on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.