API reference
components/rough
Import
Section titled “Import”import * as api from "@fungi.computer/caps/components/rough";Exports
Section titled “Exports”| Kind | Export | Description |
|---|---|---|
| type alias | RoughProps | Props accepted by Rough. |
| constant | Rough | A hand-drawn Rough.js mark (box, underline, circle, highlight, speech bubble or
leader line) around its children, in theme ink or primary. Rough.js loads lazily
after hydration; until then, and without JavaScript, a plain CSS border,
underline or tint stands in. The mark is aria-hidden and never takes pointer
events, so the children keep their focus rings and clicks. |
RoughPropstype alias
Section titled “RoughProps”type RoughProps = object & HTMLAttributes<HTMLElement>;Props accepted by Rough.
Type Declaration
Section titled “Type Declaration”| Name | Type | Description |
|---|---|---|
mark |
RoughMark |
The mark: a box, underline, circle, highlight, speech bubble or line. |
tone? |
RoughTone |
Theme ink (the default) or the primary accent. |
seed? |
number |
Fixes the wobble, so the mark looks the same on every render. |
weight? |
number |
Stroke width in CSS pixels. |
roughness? |
number |
0 is a ruler, 3 is a scribble. |
fill? |
"none" | "solid" | "hachure" |
Fill inside a box, circle or bubble. |
tail? |
"left" | "right" | "none" |
For bubble: the lower corner its tail leaves from. |
points? |
string |
For line: percent points in the box, e.g. 0,100 100,0. |
animate? |
boolean |
Draw the mark in once, stroke by stroke, after delay. Skipped for reduced motion. |
delay? |
number |
Seconds to wait before an animate mark draws in (default 0.2). |
block? |
boolean |
Render as a block (div) instead of inline (span). |
Roughconstant
Section titled “Rough”const Rough: ForwardRefExoticComponent< object & HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>;A hand-drawn Rough.js mark (box, underline, circle, highlight, speech bubble or
leader line) around its children, in theme ink or primary. Rough.js loads lazily
after hydration; until then, and without JavaScript, a plain CSS border,
underline or tint stands in. The mark is aria-hidden and never takes pointer
events, so the children keep their focus rings and clicks.
Static pages can write the same attributes (see drawRough) instead of hydrating this component.
References
Section titled “References”RoughMark
Section titled “RoughMark”Re-exports RoughMark
RoughTone
Section titled “RoughTone”Re-exports RoughTone