Share via

Оформление элементов управления "Ход выполнения" (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Узнайте, как применять каскадные таблицы стилей (CSS) и таблицы стилей библиотеки Windows для JavaScript для стилизации элементов управления progress.

Что необходимо знать

Технологии

Необходимые условия

Полезные свойства CSS

Эти свойства CSS особенно полезны при стилизации элемента управления progress:

  • width
    Указывает ширину элемента управления "Ход выполнения". Ширина и высота кольцевого индикатора неопределенного состояния должны быть одинаковы.

  • height
    Указывает высоту элемента управления "Ход выполнения". Ширина и высота кольцевого индикатора неопределенного состояния должны быть одинаковы.

  • color
    Указывает цвет полосы определенного индикатора выполнения и цвет точек неопределенного и кольцевого индикаторов выполнения.

    В этом примере создается полосной индикатор определенного состояния progress с голубым цветом полосы.

    <progress value="0.4" style="color: blue"  />

Псевдоэлементы для стилизации элементов управления "Ход выполнения"

Элемент управления progress предоставляет эти псевдоэлементы, которые вы можете использовать как селекторы для стилизации определенных частей элемента управления.

  • ::-ms-fill
    Применяет один или несколько стилей к части элементов управления progress с определенным состоянием и задает анимацию элементов управления "Ход выполнения" с неопределенным состоянием.

    Все стили применяются к части определенного индикатора выполнения, за исключением свойства стиля animation-name, которое управляет анимацией неопределенного прямого и кольцевого индикаторов выполнения.

    В данном примере элемент управления progress отображается как неопределенный кольцевой индикатор выполнения.

    

/* 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; }

(Дополнительные сведения о различных сочетаниях псевдоэлементов с другими селекторами см. в разделе Основные сведения о селекторах CSS).

Псевдоклассы для стилизации элементов управления "Ход выполнения"

Этот элемент поддерживает следующие псевдоклассы, которые можно использовать в качестве селекторов для стилизации элемента управления в определенных состояниях.

  • :indeterminate
    Применяет один или несколько стилей к элементу управления progress в неопределенном состоянии.

    В этом примере определяется стиль для элементов управления progress в неопределенном состоянии.

    
progress:indeterminate {
    /* styling here */
}

(Дополнительные сведения о различных сочетаниях псевдоклассов с другими селекторами см. в разделе Основные сведения о селекторах CSS).

Классы CSS в WinJS для задания стиля элементов управления progress

В WinJS предусмотрено несколько классов CSS для стилизации элемента управления progress.

Чтобы применить эти классы, задайте имя класса в качестве атрибута class элемента управления. Вы можете назначить несколько классов одному элементу, разделив имена классов пробелом. В данном примере к элементу управления progress применяются классы win-ring и win-large.

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

В WinJS предусмотрены следующие классы CSS для стилизации элемента управления progress:

  • win-error
    Приостанавливает определенный progress и отображает его в стиле ошибки.

  • win-large
    Увеличивает элемент управления progress. Используйте этот стиль для операций в полноэкранном режиме.

  • win-medium
    Назначает средний размер элементу управления progress. Используйте этот класс, если кольцевой индикатор выполнения отображается рядом с текстом размером 20 pt.

  • win-paused
    Приостанавливает выполнение полосного индикатора определенного состояния progress.

  • win-ring
    Отображает элемент управления progress в виде неопределенного кольцевого индикатора. Вы должны указать ширину и высоту элемента управления progress, задав свойства width и height или применив класс win-medium или win-large.

Связанные разделы

Краткое руководство: добавление элементов управления "Ход выполнения"

Руководство и контрольный список для элементов управления ходом выполнения

Основные сведения о селекторах CSS