ShadowUI offre oltre 60 componenti pronti all’uso, organizzati per categoria.
1. Controlli Form #
ShaInput #
Campo di input testuale.
Proprietà:
- value – Valore (data-bindable)
- label – Etichetta
- labelPosition – top, left, none
- placeholder – Testo placeholder
- hintText – Testo di aiuto
- disabled – Disabilitato
Eventi:
- onChange(event)
ShaCheckbox #
Casella di selezione.
Proprietà:
- checked – Stato (data-bindable)
- label – Etichetta
- labelSide – left, right – disabled
Eventi:
- onChange(event)
ShaSwitch #
Interruttore on/off.
Proprietà:
- checked – Stato (data-bindable)
- label – Etichetta
- labelSide – left, right – disabled
Eventi:
- onChange(event)
ShaSelect #
Menu a tendina.
Proprietà:
- value – Valore selezionato (data-bindable)
- placeholder – Testo placeholder
- label – Etichetta interna
- list – Enum con opzioni – disabled
Eventi:
- onSelect(event)
ShaRadioGroup #
Gruppo di radio button per selezione esclusiva.
Proprietà:
- value – Valore selezionato (data-bindable)
- layout – vertical, horizontal
ShaRadioItem:
- value – Valore opzione
- label – Etichetta – disabled
Eventi:
- onValueChange(event)
ShaCombobox #
Select con ricerca integrata.
Proprietà:
- value – Valore selezionato (data-bindable)
- placeholder – list
- Enum opzioni – searchEnabled
- Abilita ricerca – disabled
Eventi:
- onSelect(event)
- onSearch(event)
2. Widget Interattivi #
ShaDatePicker #
Selettore date.
Proprietà:
- selectedDate1 – Data selezionata (o inizio range)
- selectedDate2 – Data fine range (se mode=“range”)
- mode – single, range
- locale – Locale (es. “it-IT”)
- placeholder – dateFormat
- Formato data – resetButtonVisible
- Mostra reset – disabled
Metodi:
- setSelected(date)
- getSelected(callback)
Eventi:
- onSelect(event)
ShaSlider #
Cursore per valori numerici.
Proprietà:
- value – Valore(i) (data-bindable)
- min – Minimo
- max – Massimo
- step – Incremento
- knobsNumber – 1 o 2 cursori
- disabled
Eventi:
- onInput(event) – Durante movimento
- onChange(event) – Al rilascio
ShaProgress #
Barra di progresso.
Proprietà:
- value – Valore corrente (0-100)
- max – Valore massimo
- showLabel – Mostra percentuale
ShaInputOTP #
Input per codici OTP.
Proprietà:
- value – Codice inserito
- length – Numero cifre (default: 6)
- separator – minus, dot, none
- mode – numberOnly, charOnly, charAndNumber
- disabled
Eventi:
- onChange(event)
- onComplete(event) – Tutti i campi compilati
ShaToggle #
Pulsante toggle con stato on/off.
Proprietà:
- pressed – Stato (data-bindable)
- text – Testo
- icon – Icona
- iconPosition – left, right, only
- variant – Stile
- disabled
Eventi:
- onClick(event)
3. Visualizzazione Dati #
ShaChart #
Grafici versatili (6 tipi).
Proprietà:
- type – line, bar, area, pie, radar, radial
- data – Array dati
- dataKeys – Chiavi da plottare (line/bar/area/radar)
- labels – Etichette legenda
- xAxisKey – Proprietà asse X (default: “name”)
- nameKey – Proprietà nome (pie/radial)
- dataKey – Proprietà valore (pie/radial)
- showTooltip – Mostra tooltip (default: true)
- showGrid – Mostra griglia (default: false)
- showLegend – Mostra legenda (default: true)
ShaCalendar #
Calendario per selezione date ed eventi.
Proprietà:
- selectedDate – Data selezionata
- mode – single, multiple, range
- locale – Locale
- events – Array eventi
- disabled
- Date disabilitate
Eventi:
- onDateSelect(event)
ShaTableElement #
Tabelle HTML strutturate.
Varianti:
- table – Contenitore
- tableHead – Header
- tableBody – Body
- tableFoot – Footer
- tableRow – Riga
- tableHeader – Cella header (th)
- tableData – Cella dati (td)
- caption – Didascalia
4. Contenuti e Badge #
ShaBadge #
Badge compatto.
Proprietà:
- label – Testo (data-bindable)
- variant – default, secondary, outline, destructive
ShaAvatar #
Avatar utente.
Proprietà:
- src – URL immagine
- lt – Testo alternativo
- fallback – Iniziali se no immagine
- size – sm, md, lg
ShaLabel #
Etichetta testuale.
Proprietà:
- innerText – Testo
- size – default, small, medium, large, xl, xxl
- aspect – default, muted, primary, secondary, accent, destructive
ShaSeparator #
Linea separatrice.
Proprietà:
- orientation – horizontal, vertical
ShaAlertBadge #
Badge di alert.
Proprietà:
- label – Testo
- variant – default, destructive
- icon – Icona
5. Layout Avanzati #
ShaAccordion #
Pannelli espandibili.
Proprietà:
- title – Titolo
- state – open, closed
Eventi:
- onToggle(event)
ShaCarousel #
Carosello contenuti.
Proprietà:
- direction – horizontal, vertical
- autoPlay – Avanza automaticamente
- interval – Intervallo auto-play (ms)
- showDots – Mostra indicatori
- showArrows – Mostra frecce
Eventi:
- nChange(event) – Cambio slide
Riepilogo componenti per caso d’uso #
Form di input: ShaInput, ShaCheckbox, ShaSwitch, ShaSelect, ShaRadioGroup, ShaCombobox, ShaDatePicker.
Azioni: ShaButton, ShaToggle, ShaDropdownMenu.
Navigazione: ShaTabs, ShaBreadcrumb, ShaSidebar, ShaNavController.
Layout: – ShaGrid, ShaRow, ShaCol, ShaCard, ShaAccordion.
Dati: ShaChart, ShaCalendar, ShaTableElement, ShaProgress.
Contenuti: ShaLabel, ShaBadge, ShaAvatar, ShaIcon, ShaSeparator, ShaSkeleton
Per esempi dettagliati di ogni componente, consultare i progetti shadow-design-patterns e Sprinty nella Console di Instant Developer Cloud.