Utilizzo dei widget > 2D > Pulsante
  
Pulsante
Qual è la funzione di questo widget?
Un pulsante comunica l'azione che si verifica se viene toccato in fase di esecuzione.
Quando va utilizzato questo widget?
I pulsanti consentono all'utente dell'esperienza di interagire e spostarsi all'interno dell'esperienza. Utilizzare il widget Pulsante per comunicare in modo chiaro all'utente l'azione che si verifica quando il pulsante viene toccato. È possibile modificare lo stile dei pulsanti utilizzando CSS o i temi predefiniti. Per ulteriori informazioni sui temi, vedere Temi
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
Le seguenti tabelle riportano un elenco di proprietà, servizi ed eventi specifici di questo widget.
Proprietà
Descrizione
Margine
Crea un margine intorno al pulsante. Attualmente, non è possibile inserire valori per lati specifici ed è necessario immettere manualmente un numero seguito da uno dei formati supportati (ad esempio, 10px):
px
%
in
mm
cm
ex
em
pt
pc
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
1. Trascinare e rilasciare un widget Pulsante nell'area di lavoro.
2. Immettere il nome del pulsante nel campo Testo. Ad esempio, Play.
3. Associare l'evento Clic del pulsante a un altro widget e selezionare il tipo di associazione che si desidera creare. Ad esempio, se si associa l'evento Clic a un modello e si seleziona Riproduci tutto nella finestra Seleziona destinazione associazione, quando si tocca il pulsante in un'esperienza vengono riprodotti tutti i passi della sequenza associati al modello.
* 
In questo esempio abbiamo utilizzato il tema predefinito button-balanced per rendere il pulsante di colore verde.
Definire lo stile del widget con CSS
Per definire lo stile del widget è possibile utilizzare CSS. Quello che segue è un esempio di classe CSS che è possibile creare e applicare:
* 
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
Esempio CSS
Come si presenta
.ptc-button {
border-width: 1px;
border-style: outset;
border-color: rgb(46, 50, 49);
border-radius: 25px;
background: rgb(47, 48, 53);
font-size: 16px;
font-family: Century Gothic;
color: white;
}
Per ulteriori informazioni sull'implementazione delle classi CSS, vedere Stili dell'applicazione.