Doodle
A doodle in the margin ink of the Cahier: an arrow pointing at a block, a circled word, a star, a wavy underline or a small sketch of the site's bird — inline SVG, the same on the server and on the client. Beside a block on a wide screen, or in the flow around a real word.
import { Doodle } from "@krizaka/ui/doodle";Web uniquement — React, depuis @krizaka/ui/doodle. Bêta : son API peut encore changer à une version mineure.
- Mobile · n/a. A phone has no margin to scribble in.
Pourquoi il est là. The Cahier (ADR-004, krizaka-ui#554 and #548): the margin doodles beside the stuck blocks of www.krizaka.com on a wide screen, and the inline marks and the bird's sketch on ui., java., ts. and the motion lab.
Quand l’utiliser
- Beside a
Stuckblock or a heading, on a wide screen, where the notebook's margin has room. - To point at what matters on a page of the Cahier: an arrow to the heading, a circle around the word that carries the promise.
- To sign a page with its bird: a small sketch in the margin of a tool site's home or documentation.
Quand ne pas l’utiliser
- Something the reader must know: a status, a warning.À la place : Alert
- A note with words, hung in the margin.À la place : Footnote & caption
- The bird itself, drawn and alive, as a character.À la place : Mascots
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Doodle } from "@krizaka/ui/doodle";Exemples
Five doodles
An arrow, a circled word, a star, a wavy underline and a bird's sketch, inline.
In the margin
An arrow and a star beside a stuck card, from 1360 px.
Marks in the margin
An arrow to a heading, a circled word and a wavy underline around real text.
The bird, sketched
A small sketch of each site's bird, with its text equivalent.
Props
A doodle: an arrow, a circled word, a star, a wavy underline or a bird's sketch, in the margin ink. Decoration unless it has a label.
| Prop | Type | Défaut | Description |
|---|---|---|---|
kindrequis | DoodleKind | — | What is drawn: arrow (points at the block), circle (rings a word), star, wave (an underline) or bird (a small sketch). |
bird | DoodleBird | duck | Which bird kind="bird" sketches. |
children | ReactNode | — | Real text a circle rings or a wave underlines, in the flow (« nothing to copy »): it stays text, the ink is hidden. |
flip | boolean | false | Turns the mark to face the other way (an inline arrow that points left). A margin doodle on the right already does. |
label | string | — | A text equivalent, when the mark says something (« Start with the installation »): it is then an image carrying it. Without it, decoration. |
place | "inline" | "margin" | margin | margin hangs it beside the nearest positioned ancestor, on a wide screen only; inline keeps it in the flow (always, around children). |
seed | string | — | Where its slight tilt comes from: the same string always leans the same way (±8°). |
side | "right" | "left" | left | Which margin it sits in: left (where the notebook's margin is) or right. It points at the block from either. |
top | string | 0px | How far from the top of the block it sits, as a CSS length. |
word | string | — | The word a margin circle rings (« ça ! »). It is decoration too: nothing that matters is said only here. |
Accessibilité
- A doodle without a
labelis decoration:aria-hidden, with its word, no focus and no pointer. With alabelit is an image carrying that text. - A circled or underlined word (
children) is ordinary text in the reading order; the SVG over it is hidden. - In the margin it sits beside the block and never over text; below 1360 px it is not displayed (
place="inline"keeps it in the flow). - Drawn in the margin ink; the marks are deterministic and nothing animates.
Bonnes pratiques
- At most one or two doodles in view; the register stays refined.
- Point at what matters: an arrow toward the block, a circle round its key word.
- Wrap a real word with
circleorwave(children): the word stays text, the ink only rings or underlines it. - Give a lone mark a
labelonly when it says something (« Start with the installation »); otherwise it stays decoration. - Give a
seedso the tilt is the same on every render. - Ink is a token: set
--kz-doodle-inkon a section to re-ink its marks; by default it is the margin's red.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub