Progress
Le barre di avanzamento includono la barra di avanzamento lineare e la barra di avanzamento circolare.
Modalità d'uso
La barra di avanzamento lineare è scritta in puro CSS e ha effetto semplicemente scrivendo il codice HTML.
La barra di avanzamento circolare viene inizializzata automaticamente al caricamento della pagina. Per le barre di avanzamento circolari generate dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.
Colore
La barra di avanzamento lineare utilizza il colore primario.
La barra di avanzamento circolare utilizza il colore primario o è multicolore.
Linear Progress
Indeterminato
Questa barra di avanzamento viene utilizzata quando non è possibile conoscere il valore esatto dell'avanzamento.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Determinato
Questa barra di avanzamento viene utilizzata quando è possibile conoscere il valore esatto dell'avanzamento.
Aggiorna il valore dell'avanzamento modificando la proprietà width dell'elemento <div class="mdui-progress-determinate"></div>.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Circular Progress
Basta aggiungere l'elemento <div class="mdui-spinner"></div> per generare una barra di avanzamento circolare. Aggiungendo la classe .mdui-spinner-colorful si genera una barra di avanzamento circolare multicolore.
È possibile modificare le dimensioni della barra di avanzamento circolare modificando le proprietà di stile width e height della classe .mdui-spinner, ma è necessario assicurarsi che i valori di width e height siano uguali.
Circular Progress generata dinamicamente
Se il componente della barra di avanzamento circolare è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.
Se è necessario modificare un componente della barra di avanzamento circolare esistente, è necessario chiamare il metodo mdui.updateSpinners() per reinizializzare il componente. Questo metodo può accettare come parametro un selettore CSS (che dovrebbe includere il nome della classe .mdui-spinner), un elemento DOM o un array di elementi DOM, indicando che verranno reinizializzate solo le barre di avanzamento circolari specificate. Se non viene passato alcun parametro, verranno reinizializzate tutte le barre di avanzamento circolari nella pagina.
Elenco classi CSS
| Nome classe | Descrizione |
|---|---|
.mdui-progress | Definisce una barra di avanzamento lineare. |
.mdui-progress-indeterminate | Barra di avanzamento lineare ad avanzamento indeterminato. |
.mdui-progress-determinate | Barra di avanzamento lineare ad avanzamento determinato. |
.mdui-spinner | Definisce una barra di avanzamento circolare. |
.mdui-spinner-colorful | Barra di avanzamento circolare multicolore. |