WoodyLab

Documentazione · Componenti

Un componente, N facce

Lo stesso componente React, infinite varianti: cambi il viewMode, non il codice. Questi sono i mattoni del sistema.

Dal vivo

Un’azione, tante varianti

Lo stesso blocco Action, sei viewMode diversi — nessuna riga di codice cambia.

Struttura

Atomic Design

I componenti sono organizzati in tier: atomi (testo, azioni, badge, icone), molecole (card, accordion, tabs), organismi (form, navigazione, slider). Si compone dal basso verso l’alto — ogni tier riusa quello sotto.

Atomic Design

Le famiglie

Tre livelli, un solo motore

Atomi

Testo, azioni, badge, avatar, icone, progress, separatori: i mattoni elementari, guidati dal viewMode.

Molecole

Card, accordion, tabs, collapsible, hover card, dialog: composizioni di atomi con slot e stato.

Organismi

Form, navigazione, slider, sezioni: strutture complete guidate dai dati.

Un contenuto, infiniti temi

Cambia tema dal selettore in basso a destra e guarda ogni componente ristilarsi — stesso contenuto, resa diversa. Questo è UIMS dal vivo.

Come funziona