Barra di avanzamento

Fornisce una rappresentazione visiva di a che punto è un utente nel completamento di una particolare operazione.

La visualizzazione della vista Barra di avanzamento fornisce all'utente una comprensione immediata del numero di schede, pagine o campi di immissione completati. È più comunemente utilizzato come intestazione su schede o moduli Web.

Proprietà di configurazione

In Configurazione, impostare o modificare le proprietà di aspetto e comportamento per la vista. In Eventi, impostare le proprietà di configurazione della formula.

Dimensione schermo
Una proprietà di configurazione che ha l'icona Dimensioni schermo Icona Dimensioni schermo accanto al nome proprietà può avere valori differenti per ciascuna dimensione schermo. Se non si imposta un valore, la dimensione dello schermo eredita il valore della dimensione dello schermo successivo più grande come valore predefinito.
Definizioni del tema
Le definizioni dei temi specificano i colori e gli stili per una vista e ne determinano l'aspetto. È possibile visualizzare l'anteprima dell'aspetto delle viste nell'editor del tema. Consultare Temi.
Le proprietà di configurazione dell'aspetto per la vista Barra di avanzamento vengono mostrate nella seguente tabella:
Tabella 1. Proprietà di configurazione dell'aspetto per la barra di avanzamento
Proprietà di configurazione dell'aspetto Descrizione Tipo di dati
Stile colore Specifica uno stile di colore per il colore di riempimento della barra di avanzamento. I colori corrispondono alle variabili del tema specificato. Lo stile del colore predefinito è Predefinito (grigio). TooltipColorStyle
A strisce Quando selezionato, aggiunge strisce alla barra di avanzamento. Boolean
Attivo Quando selezionato e quando è selezionato anche Striped , le strisce della barra di avanzamento vengono spostate. Boolean
Raggio Specifica la rotondità degli angoli della barra di avanzamento, in unità pixel o em. Ad esempio, 15px o 1em. Se viene specificato solo un numero senza alcuna unità, il numero viene interpretato come il numero di pixel.

Per impostazione predefinita, non viene specificato alcun raggio del bordo.

 String
Larghezza Icona Dimensioni schermo Specifica la larghezza della barra di avanzamento in pixel, percentuali o unità em. Ad esempio: 800pxo 80% o 50em. Se viene specificato solo un numero senza alcuna unità, il numero viene interpretato come il numero di pixel. String
Altezza Icona Dimensioni schermo Specifica l'altezza del pozzo in pixel o unità em. Ad esempio, 15px o 1em. Se viene specificato solo un numero senza alcuna unità, il numero viene interpretato come il numero di pixel. Per impostazione predefinita, non viene specificata alcuna altezza. String
Le proprietà di configurazione del comportamento per la vista Barra di avanzamento sono mostrate nella seguente tabella:
Tabella 2. Proprietà di configurazione del comportamento per la barra di avanzamento
Proprietà di configurazione del comportamento Descrizione Tipo di dati
Valore massimo Specifica il valore numerico totale dell'avanzamento (da non confondere con Larghezza). Ad esempio, 100. Integer

Esempio

In questo esempio, le seguenti proprietà di configurazione vengono impostate per la vista Barra di avanzamento:

  • Proprietà di configurazione del comportamento:
    • Valore massimo è impostato su 100.
  • Proprietà di configurazione dell'aspetto:
    • Stile colore è impostato su Info.
    • Striped è selezionato.
    • Attivo è selezionato.
    • Raggio è impostato su 1.
    • Larghezza è impostato su 25%.
  • Proprietà di configurazione eventi:
    • Per l'evento Al caricamento , il metodo setProgress viene utilizzato per impostare la barra di avanzamento su 50: me.setProgress(50);

Queste proprietà e i loro valori risultano in una barra di avanzamento a metà riempita azzurra, a strisce e animata con angoli arrotondati, che occupa il 25% della lunghezza della pagina.

Eventi

Impostare o modificare le proprietà di configurazione della formula e i gestori eventi per la vista nelle proprietà Eventi . È possibile impostare gli eventi da attivare in modo programmatico o quando un utente interagisce con la vista. Per informazioni su come definire e codificare gli eventi, vedere Eventi definiti dall'utente.
Le proprietà di configurazione della formula per la vista della barra Avanzamento sono mostrate nella tabella seguente:
Tabella 3. Proprietà di configurazione della formula per la barra di avanzamento
Proprietà di configurazione della formula Descrizione Tipo di dati
Formula Espressione da utilizzare per calcolare l'avanzamento.

Per ulteriori informazioni sulle formule, consultare Formule.

 String
La vista Barra di avanzamento ha i seguenti tipi di gestori eventi:
  • On load: attivato quando la pagina viene caricata.
  • On click: attivato quando si fa clic sulla barra di avanzamento.

Metodi

I metodi seguenti sono disponibili per questa vista:
  • setWidth(): imposta la larghezza della barra di avanzamento.
  • getWidth(): Ottiene la dimensione configurata per la larghezza della barra di avanzamento (inclusa l'unità).
  • setHeight(): imposta l'altezza della barra di avanzamento.
  • getHeight(): Ottiene la dimensione configurata per l'altezza della barra di avanzamento (inclusa l'unità).
  • setColorStyle(): imposta lo stile di colore della barra di avanzamento.
  • setRadius(): imposta il raggio (rotondità) della barra di avanzamento.
  • setProgress(): imposta lo stato di avanzamento.
  • getProgress(): Ottiene lo stato di avanzamento.
  • setMaximum(): imposta il valore massimo della barra di avanzamento.

Per ulteriori informazioni su come utilizzare questi metodi, consultare l'API Progress bar JavaScript .

Ulteriori risorse

Per informazioni su come creare un coach o una pagina, consultare Creazione di coach.
Per informazioni sulle proprietà standard (Generale, Configurazione, Posizionamento, Visibilitàe Attributi HTML), consultare Visualizza proprietà.