Componenti
I mattoni del motore
Ogni componente del sistema, una volta sola — non i suoi viewMode. Un componente React, infinite varianti: la rappresentazione a slot mostra la struttura, il dettaglio spiega cosa fa.
Come leggerli
Un componente, N viewMode
Da non confondere il componente con le sue varianti: “Card” è UN componente, ma può avere molti viewMode (elevata, piatta, feature…). Qui elenchiamo i componenti — i mattoni reali — con la loro struttura a slot; le varianti restano un dettaglio del viewMode.
Famiglia
Struttura
Struttura
Section
Il contenitore di sezione a piena larghezza: primo livello di composizione di una pagina. Ospita header e footer opzionali attorno al contenuto e può portare comportamento (stato, animazioni) sull’intera sezione.
Slot (2): header · footer
8 viewMode a sistema
Struttura
Container
Il contenitore interno di impaginazione: larghezza massima, griglia, centratura. Vive dentro una Section e dispone i blocchi figli — è dove decidi colonne e ritmo.
Slot (2): header · footer
16 viewMode a sistema
Famiglia
Atomi
Atomi
Text
Testo semplice: rende una stringa nel tag e con le classi del viewMode. Il mattone più elementare del contenuto.
Elemento foglia — nessuno slot
43 viewMode a sistema
Atomi
RichText
Contenuto ricco (editor Lexical): titoli, paragrafi, elenchi, link e formattazione inline. Per testi lunghi e strutturati.
Elemento foglia — nessuno slot
4 viewMode a sistema
RichText · RichText
Atomi
Figure
Immagine, da upload Media o da URL, con testo alternativo e modalità fill/priority per l’ottimizzazione.
Slot (1): image
6 viewMode a sistema
Atomi
Icon
Un’icona SVG dal set del pacchetto, richiamata per nome. Scala e colore seguono il contesto.
Elemento foglia — nessuno slot
6 viewMode a sistema
Atomi
Action
Bottone o link con un comportamento: naviga (link), scrolla (scroll) o emette un evento. Proietta nello slot content ciò che porta dentro — icona, label o altro.
Slot (1): content
37 viewMode a sistema
Atomi
Separator
Un divisore, orizzontale o verticale. Puramente presentazionale, per separare i blocchi.
Slot (1): root
2 viewMode a sistema
Atomi
Avatar
Immagine profilo con fallback automatico (iniziali) quando l’immagine manca.
Slot (4): root · image · fallback · avatarFallback
1 viewMode a sistema
Atomi
Progress
Barra di avanzamento, con valore e massimo guidati dal dato.
Slot (2): root · indicator
1 viewMode a sistema
Famiglia
Molecole
Molecole
Card
Il contenitore di contenuto per eccellenza: header, contenuto e footer, con bordo ed elevazione. La molecola di composizione più usata.
Slot (3): header · content · footer
11 viewMode a sistema
Molecole
Accordion
Sezioni espandibili (una o più aperte insieme). Gestisce l’animazione di apertura/chiusura e la navigazione da tastiera.
Slot (6): accordionRoot · accordionItem · accordionHeader · accordionTrigger · accordionContent · accordionIcon
1 viewMode a sistema
Molecole
Collapsible
Un singolo contenuto a scomparsa con il suo trigger. La versione minima dell’accordion.
Slot (4): collapsibleRoot · collapsibleTrigger · collapsibleIcon · collapsibleContent
1 viewMode a sistema
Molecole
HoverCard
Una scheda che compare al passaggio del mouse su un trigger, con ritardo configurabile.
Slot (3): hoverCardTrigger · hoverCardContent · hoverCardArrow
1 viewMode a sistema
Molecole
Tabs
Schede: un trigger per pannello, un solo pannello visibile alla volta. Accessibile da tastiera.
Slot (4): root · list · trigger · content
1 viewMode a sistema
Molecole
Toggle
Un interruttore a due stati (premuto / non premuto), con label.
Elemento foglia — nessuno slot
1 viewMode a sistema
Molecole
ToggleGroup
Un gruppo di toggle, a selezione singola o multipla; ogni opzione è un item.
Slot (1): item
1 viewMode a sistema
Molecole
AlertDialog
Finestra modale di conferma con azioni (annulla / conferma). Blocca il focus finché non si sceglie — per operazioni delicate.
Slot (9): trigger · overlay · content · header · title · description · footer · cancelAction · confirmAction
1 viewMode a sistema
Molecole
Swiper
Carosello/slider di slide navigabili, con frecce e bullet di paginazione. Loop e slide-per-view configurabili.
Slot (4): slide · navPrev · navNext · pagination
1 viewMode a sistema
Molecole
ThemeSwitch
Il controllo light/dark: agisce sul tema attivo e persiste la scelta.
Elemento foglia — nessuno slot
2 viewMode a sistema
Famiglia
Cornice
Cornice
Scrollspy
Un indice di pagina che evidenzia la sezione attiva mentre si scorre. Dipende dal contesto della pagina.
Elemento foglia — nessuno slot
1 viewMode a sistema
Cornice
BackToTop
Il pulsante “torna su” che compare oltre una soglia di scroll.
Elemento foglia — nessuno slot
1 viewMode a sistema
La cornice del sito
Anche la cornice (nav, widget di pagina) è fatta di componenti UIMS.