Inizia gratis
IT
EN

Documentazione · ShadowUI

Componenti Shadow UI

Documentazione storica, non aggiornata.

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.