View Categories

I pulsanti

Table Of Contents

I pulsanti sono elementi fondamentali per l’interazione utente. ShadowUI offre il componente ShaButton con diverse varianti e opzioni.

ShaButton #

Proprietà principali:

ProprietàTipoDescrizione
textstringTesto del pulsante
variantenumStile: default, secondary, outline, destructive, ghost, link
iconstringClasse icona (es. “shaicons shaicons-save”)
iconPositionenumPosizione icona: left, right, only
disabledbooleanStato disabilitato
loadingbooleanMostra spinner di caricamento
sizeenumDimensione: sm, default, lg
classNamestringClassi CSS personalizzate

Eventi:

  • onClick(event): Scatenato al click
  • onMouseOver(event): Scatenato al passaggio del mouse
  • onMouseOut(event): Scatenato quando il mouse esce

Varianti pulsante #

1. Default #

Pulsante primario con sfondo colorato.

ShaButton
  text: "Salva"
  variant: "default"
  icon: "shaicons shaicons-save"
  iconPosition: "left"

Uso: Azione principale della pagina (es. Salva, Conferma, Invia)

2. Secondary #

Pulsante secondario con sfondo grigio.

ShaButton
  text: "Annulla"
  variant: "secondary"

Uso: Azioni secondarie (es. Annulla, Chiudi).

3. Outline #

Pulsante con solo bordo colorato.

ShaButton
  text: "Modifica"
  variant: "outline"
  icon: "shaicons shaicons-edit"

Uso: Azioni terziarie, pulsanti in gruppi.

4. Destructive #

Pulsante rosso per azioni distruttive.

ShaButton
  text: "Elimina"
  variant: "destructive"
  icon: "shaicons shaicons-trash-2"

Uso: Azioni pericolose (Elimina, Rimuovi, Cancella).

5. Ghost #

Pulsante quasi trasparente, senza bordo.

ShaButton
  text: "Dettagli"
  variant: "ghost"

Uso: Azioni discrete, pulsanti in tabelle

6. Link #

Pulsante con aspetto di link testuale.

ShaButton
  text: "Scopri di più"
  variant: "link"

Uso: Link interni, azioni secondarie inline

Posizioni icona #

1. Icon Left #

Icona a sinistra del testo.

ShaButton
  text: "Nuovo Progetto"
  icon: "shaicons shaicons-plus"
  iconPosition: "left"

2. Icon Right #

Icona a destra del testo.

ShaButton
  text: "Esporta"
  icon: "shaicons shaicons-download"
  iconPosition: "right"

3. Icon Only #

Solo icona, senza testo.

ShaButton
  icon: "shaicons shaicons-settings"
  iconPosition: "only"
  variant: "ghost"

Uso: Toolbar, azioni compatte.

Stati pulsante #

Disabled #

ShaButton
  text: "Salva"
  disabled: true

Loading #

ShaButton
  text: "Caricamento..."
  loading: true

Esempio gestione loading:

function* saveButton_onClick() {
  // Attiva loading
  this.view.saveButton.disabled = true;
  this.view.saveButton.loading = true;
  this.view.saveButton.text = "Salvataggio...";

  try {
    yield this.view.dataDM.save();

    yield app.toast("Salvato con successo", {
      variant: "success"
    });
  } finally {
    // Disattiva loading
    this.view.saveButton.disabled = false;
    this.view.saveButton.loading = false;
    this.view.saveButton.text = "Salva";
  }
}

Dimensioni #

// Small
ShaButton
  text: "Piccolo"
  size: "sm"

// Default
ShaButton
  text: "Normale"
  size: "default"

// Large
ShaButton
  text: "Grande"
  size: "lg"

Gruppi di pulsanti #

Per azioni multiple correlate:

ShaRow
  className: "gap-2"
  ├── ShaButton (Salva - default)
  ├── ShaButton (Salva e continua - secondary)
  └── ShaButton (Annulla - outline)

Keyboard shortcuts #

Puoi associare shortcut da tastiera ai pulsanti:

ShaButton
  text: "Salva"
  cmdKey: "s"  // Ctrl+S / Cmd+S

Altri esempi:

  • cmdKey: “n” → Ctrl+N (Nuovo)
  • cmdKey: “f” → Ctrl+F (Cerca) 
  • cmdKey: “p” → Ctrl+P (Stampa)

Pattern comuni #

1. Pulsanti form: #

ShaCardFooter
  ├── ShaButton
  │     text: "Salva"
  │     variant: "default"
  │     icon: "shaicons shaicons-save"
  │
  ├── ShaButton
  │     text: "Salva e continua"
  │     variant: "secondary"
  │
  └── ShaButton
        text: "Annulla"
        variant: "outline"

2. Toolbar azioni: #

ShaRow
  className: "gap-1"
  ├── ShaButton (icon only - edit)
  ├── ShaButton (icon only - duplicate)
  ├── ShaButton (icon only - delete)
  └── ShaSeparator (vertical)

3. Pulsante con conferma: #

function* deleteButton_onClick() {
  let confirm = yield app.popup(
    "Conferma eliminazione",
    "Questa operazione non può essere annullata.",
    ["Annulla", "Elimina"]
  );

  if (confirm === 1) {
    yield this.deleteItem();
  }
}

4. Pulsante disabilitato condizionalmente: #

function* formInput_onChange() {
  // Disabilita salva se form non valido
  let isValid = this.validateForm();
  this.view.saveButton.disabled = !isValid;
}

5. Pulsante dropdown combo: #

ShaRow
  ├── ShaButton (Salva)
  └── ShaDropdownMenu
        trigger: ShaButton (▼ icon only)
        ├── MenuItem (Salva e chiudi)
        └── MenuItem (Salva come template)

Icone comuni #

Azioni generali: 

  • shaicons shaicons-save – Salva 
  • shaicons shaicons-x – Chiudi/Annulla 
  • shaicons shaicons-check – Conferma 
  • shaicons shaicons-plus – Aggiungi/Nuovo 
  • shaicons shaicons-edit – Modifica 
  • shaicons shaicons-trash-2 – Elimina 
  • shaicons shaicons-copy – Duplica 
  • shaicons shaicons-download – Scarica/Esporta 
  • shaicons shaicons-upload – Carica/Importa 
  • shaicons shaicons-refresh-cw – Aggiorna

Navigazione:

  • shaicons shaicons-arrow-left – Indietro 
  • shaicons shaicons-arrow-right – Avanti
  • shaicons shaicons-external-link – Apri esterno

Filtri e ricerca:

  • shaicons shaicons-search – Cerca 
  • shaicons shaicons-filter – Filtro 
  • shaicons shaicons-sort-asc – Ordina crescente 
  • shaicons shaicons-sort-desc – Ordina decrescente
Ti è stato utile?