Come applicare stili ai controlli di stato (HTML)

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Impara a usare i fogli di stile CSS (Cascading Style Sheet) e i fogli di stile della libreria Windows per JavaScript per applicare uno stile ai controlli progress.

Cosa sapere

Tecnologie

Prerequisiti

Partiamo dal presupposto che tu sappia come creare i tre diversi tipi di controllo progress: la barra di stato determinato, la barra di stato indeterminato e l'anello di stato indeterminato. Per informazioni su come aggiungere i diversi tipi di controlli progress, vedi Guida introduttiva: Aggiunta di controlli di stato.

Proprietà CSS utili

Le proprietà CSS seguenti sono particolarmente utili per l'applicazione di stili al controllo progress:

width
Specifica la larghezza del controllo di stato. Per un anello di stato indeterminato, la larghezza e l'altezza devono coincidere.
height
Specifica l'altezza del controllo di stato. Per un anello di stato indeterminato, la larghezza e l'altezza devono coincidere.
color
Specifica il colore della barra di stato determinato e il colore dei punti della barra di stato indeterminato e dell'anello di stato indeterminato.

L'esempio seguente crea una barra di progress determinato di colore blu.
```
<progress value="0.4" style="color: blue"  />
```

Pseudoelementi per l'applicazione di stili ai controlli di stato

Il controllo progress fornisce i seguenti pseudoelementi che puoi usare come selettori per applicare stili a parti specifiche del controllo:

::-ms-fill
Applica uno o più stili alla barra del controllo progress determinato e specifica l'animazione dei controlli di stato indeterminato.

Tutti gli stili vengono applicati alla parte barra del controllo barra di stato determinato, ad eccezione della proprietà di stile animation-name, che controlla l'animazione della barra e dell'anello di stato indeterminato.

L'esempio seguente imposta la visualizzazione di un controllo progress come anello di stato intermedio.
```
/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
```

Per altre info sui vari modi in cui puoi combinare pseudoelementi e altri selettori, vedi Informazioni sui selettori CSS.

Pseudoclassi per l'applicazione di stili ai controlli di stato

Questo controllo supporta le seguenti pseudoclassi che puoi usare come selettori per applicare uno stile al controllo quando si trova in stati specifici.

:indeterminate
Applica uno o più stili a un controllo progress nello stato indeterminato.

Questo esempio definisce uno stile per un controllo progress indeterminato.
```
progress:indeterminate {
    /* styling here */
}
```

Per altre info sui vari modi in cui puoi combinare pseudoclassi e altri selettori, vedi Informazioni sui selettori CSS.

Classi CSS WinJS per l'applicazione di stili ai controlli di stato

WinJS offre diverse classi CSS per l'applicazione di stili al controllo progress.

Per usare queste classi, imposta l'attributo class del controllo sul nome della classe. Puoi assegnare più classi a un elemento, semplicemente separando ogni nome di classe con uno spazio. Questo esempio applica le classi win-ring e win-large a un controllo progress.

<progress class="win-ring win-large" />

WinJS offre diverse le seguenti CSS per l'applicazione di stili al controllo progress.

win-error
Sospende una barra progress determinato e la visualizza nello stile di errore.
win-large
Ingrandisce il controllo progress. Usa questo stile per le operazioni modali a schermo intero.
win-medium
Imposta il controllo progress su dimensioni medie. Usa questa classe per visualizzare un anello di stato accanto a testo in formato 20 punti.
win-paused
Sospende l'avanzamento di una barra progress determinato.
win-ring
Visualizza il controllo progress come anello di stato indeterminato. Devi specificare la larghezza e l'altezza del controllo progress impostando le proprietà width e height o usando la classe win-medium o win-large.

Argomenti correlati

Guida introduttiva: Aggiunta di controlli di stato

Linee guida ed elenco di controllo per i controlli di stato

Informazioni sui selettori CSS

Condividi tramite