Il contenuto delle pagine in ShadowUI si organizza tramite un sistema di griglia responsive e card.
Sistema Grid #
ShadowUI utilizza un sistema di griglia a 12 colonne simile a Bootstrap, con breakpoint responsive.
Un esempio di griglia si può trovare nel progetto ShadowUI Design Patterns di cui vediamo un’immagine di seguito
Componenti grid #
ShaGrid: Contenitore principale
ShaRow: Riga che contiene colonne
ShaCol: Colonna responsive
ShaGrid #
Contenitore con padding e margini gestiti.
Proprietà:
- style: Stili personalizzati
- className: Classi CSS
ShaRow #
Contenitore orizzontale per colonne.
Proprietà:
| Proprietà | Tipo | Descrizione |
|---|---|---|
| noWrap | boolean | Impedisce wrap delle colonne (default: false) |
| justifyContent | enum | Allineamento orizzontale: start, center, end, around, between |
| alignItems | enum | Allineamento verticale: start, center, end, stretch, baseline |
| className | string | Classi CSS personalizzate |
ShaCol #
Colonna responsive con breakpoint.
Proprietà breakpoint:
| Breakpoint | Dimensione | Proprietà |
|---|---|---|
| xs | < 576px | xs |
| sm | ≥ 576px | sm |
| md | ≥ 768px | md |
| lg | ≥ 992px | lg |
| xl | ≥ 1200px | xl |
| xxl | ≥ 1400px | xxl |
Valori colonne:
- auto: Larghezza automatica
- fluid: Occupa spazio disponibile
- 1 a 12: Numero colonne (1/12 a 12/12)
- none: Nasconde la colonna
Esempio:
ShaRow
├── ShaCol
│ xs: "12" // 100% su mobile
│ md: "6" // 50% su tablet
│ lg: "4" // 33% su desktop
│
├── ShaCol
│ xs: "12"
│ md: "6"
│ lg: "4"
│
└── ShaCol
xs: "12"
md: "12"
lg: "4"Layout comuni #
1. Layout a 2 colonne (50/50): #
ShaGrid
└── ShaRow
├── ShaCol (xs="12", md="6")
│ └── contenuto sinistra
│
└── ShaCol (xs="12", md="6")
└── contenuto destra2. Layout sidebar + content (33/66): #
ShaGrid
└── ShaRow
├── ShaCol (xs="12", lg="4")
│ └── sidebar/menu
│
└── ShaCol (xs="12", lg="8")
└── contenuto principale3. Layout 3 colonne uguali: #
ShaGrid
└── ShaRow
├── ShaCol (xs="12", md="6", lg="4")
├── ShaCol (xs="12", md="6", lg="4")
└── ShaCol (xs="12", md="12", lg="4")4. Layout dashboard con card: #
ShaGrid
└── ShaRow
├── ShaCol (xs="12", sm="6", lg="3")
│ └── ShaCard (Metric 1)
│
├── ShaCol (xs="12", sm="6", lg="3")
│ └── ShaCard (Metric 2)
│
├── ShaCol (xs="12", sm="6", lg="3")
│ └── ShaCard (Metric 3)
│
└── ShaCol (xs="12", sm="6", lg="3")
└── ShaCard (Metric 4)Card (ShaCard) #
Le card sono contenitori per raggruppare contenuti correlati.
Struttura ShaCard #
ShaCard
├── ShaCardHeader (opzionale)
├── ShaCardContent (obbligatorio)
└── ShaCardFooter (opzionale)ShaCard #
Contenitore principale.
Proprietà:
- className: Classi CSS (es. “shadow-lg”, “border-2”)
- style: Stili inline
ShaCardHeader #
Intestazione della card.
Proprietà:
| Proprietà | Tipo | Descrizione |
|---|---|---|
| title | string | Titolo principale |
| description | string | Sottotitolo/descrizione |
| className | string | Classi CSS personalizzate |
Esempio:
ShaCardHeader
title: "Dettagli Progetto"
description: "Informazioni generali del progetto"ShaCardContent #
Contenuto principale della card.
Può contenere qualsiasi elemento: form, tabelle, liste, grafici, etc.
ShaCardFooter #
Sezione footer con azioni o informazioni aggiuntive.
Uso tipico:
- Pulsanti che svolgono azioni (Salva, Annulla, Elimina)
- Timestamp (Ultima modifica, Creato il…)
- Link secondari
Pattern Card comuni #
1. Card informazioni: #
ShaCard
├── ShaCardHeader
│ title: "Informazioni Utente"
│
├── ShaCardContent
│ ├── ShaLabel (Nome)
│ ├── ShaLabel (Email)
│ └── ShaLabel (Ruolo)
│
└── ShaCardFooter
└── ShaButton (Modifica)2. Card form: #
ShaCard
├── ShaCardHeader
│ title: "Nuovo Progetto"
│ description: "Compila i campi per creare un nuovo progetto"
│
├── ShaCardContent
│ ├── ShaInput (Nome)
│ ├── ShaInput (Descrizione)
│ └── ShaSelect (Categoria)
│
└── ShaCardFooter
├── ShaButton (Salva - default)
└── ShaButton (Annulla - outline)3. Card dashboard con metrica: #
ShaCard
├── ShaCardHeader
│ title: "Vendite Totali"
│
└── ShaCardContent
├── ShaLabel (€ 145,000 - size: "xxl")
└── ShaLabel (+12% rispetto al mese scorso - muted)4. Card lista dinamica con DataMap: #
ShaCard
├── ShaCardHeader
│ title: "Progetti Attivi"
│ action: ShaButton (+ Nuovo)
│
├── ShaCardContent
│ └── projectRow (template: projectsDM)
│ ├── ShaLabel (§name)
│ ├── ShaBadge (§status)
│ └── ShaButton (Apri - ghost)
│
└── ShaCardFooter
└── ShaLabel (Totale: §projectsDM.rows.length progetti)5. Card nidificate: #
ShaCard (contenitore principale)
└── ShaCardContent
├── ShaCard (sezione 1)
│ └── contenuto 1
│
└── ShaCard (sezione 2)
└── contenuto 26. Card con grafico: #
ShaCard
├── ShaCardHeader
│ title: "Andamento Vendite"
│
├── ShaCardContent
│ └── ShaChart
│ type: "line"
│ data: salesData
│
└── ShaCardFooter
└── ShaButton (Esporta dati)Layout completo esempio #
Pagina dettaglio progetto:
ShaPage
└── ShaGrid
├── ShaRow (Header con azioni)
│ └── ShaCol
│ ├── ShaLabel (Titolo progetto - xxl)
│ └── ShaRow (Pulsanti)
│
├── ShaRow (Contenuto principale)
│ ├── ShaCol (xs="12", lg="8")
│ │ ├── ShaCard (Informazioni)
│ │ ├── ShaCard (Descrizione)
│ │ └── ShaCard (Team)
│ │
│ └── ShaCol (xs="12", lg="4")
│ ├── ShaCard (Stato)
│ ├── ShaCard (Date)
│ └── ShaCard (Tag)
│
└── ShaRow (Footer)
└── ShaCol
└── ShaCard (Storico attività)Best Practices #
- Mobile-first: Inizia sempre con xs=”12″ per mobile
- Breakpoint progressivi: Definisci layout per ogni dimensione
xs=”12″ // Mobile: 100%
md=”6″ // Tablet: 50%
lg=”4″ // Desktop: 33% - Card coerenti: Mantieni stile uniforme tra card
- Spazi consistenti: Usa classi gap per spacing
ShaRow
className: “gap-4” // 1rem di spazio tra colonne - Padding card: Usa ShaCardContent per padding automatico
- Card max-width: Limita larghezza card per leggibilità
ShaCard
className: “max-w-2xl mx-auto”