Come applicare stili ai controlli di stato (HTML)

  • Articolo

[ 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