Share via

Стилизация панелей приложения AppBar и панелей инструментов ToolBar (HTML)

  • Статья

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

Содержит примеры применения стилей к AppBar и ToolBar, а также к их элементам управления.

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

Введение

В статье Краткое руководство: настройка стиля элементов управления рассказывается, как с помощью наборов стилей, содержащихся в таблицах стилей библиотеки Windows для JavaScript, можно автоматически придать вашему приложению внешний вид и удобство использования Windows 10. В примерах ниже демонстрируется использование каскадных таблиц стилей (CSS) для настройки некоторых стилей панели приложения AppBar.

Светлые и темные темы

Выбор таблицы темных или светлых стилей повлияет на внешний вид панели приложения AppBar, а также других элементов управления. Пример панели приложения AppBar:

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

Чтобы выбрать таблицу с темным стилем, выполните указанные ниже действия.

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

Благодаря этой таблице панель приложения AppBar будет выглядеть указанным ниже образом.

Панель приложения в темном стиле

Кроме того, можно выбрать таблицу со светлым стилем.

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

Благодаря этой таблице панель приложения AppBar будет выглядеть указанным ниже образом.

Панель приложения в светлом стиле

Панель инструментов ToolBar будет выглядеть так же за счет использования тех же таблиц стилей.

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

Указанные ниже свойства CSS широко используются с элементами управления AppBar и ToolBar.

  • Border-color (Цвет границы) управляет цветом границы панели приложения AppBar.

    Например, border-color: rgb(255, 224, 100);

  • Background-color (Цвет фона) управляет цветом фона панели приложения AppBar.

    Например, background-color: rgb(255, 224, 100);

Примечание  Эти значения обычно задаются заранее в файле ui-light.css или ui-dark.css.

 

Распространенные селекторы частей и состояний

Некоторые полезные селекторы CSS для установки стилей частей и состояний вашего элемента управления:

  • .win-commandНастраивает стиль метки команды на панели приложения AppBar:

    .win-appbar .win-command
{
    color: rgb(28, 160, 218);
}

    Кнопки с цветными подписями команд

    Примечание  Пользователь должен коснуться или нажаться кнопку с многоточием, чтобы открыть панель приложения AppBar и увидеть результаты. Метки команд по умолчанию скрыты.

     

  • .win-commandimageНастраивает стиль изображения значка кнопки:

    .win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

    Кнопки с цветными значками команд

Псевдоклассы

Следующие псевдоклассы можно использовать в качестве селекторов для установки стиля кнопок панели приложения AppBar, когда они находятся в определенных состояниях:

  • :hover Пользователь наводит курсор на значок кнопки и не активирует ее щелчком, при этом цвет фона кнопки изменится и останется измененным, пока курсор не будет убран с кнопки. Кроме того, по умолчанию при наведении курсора на кнопку отображается подсказка для нее.

    Подсказка, появляющаяся при наведении указателя мыши на кнопку «Домой»

  • :activeКнопка активна между моментами, когда пользователь нажимает элемент управления и выбирает вариант или когда кнопке присвоен тип type="toggle".

    Активная кнопка камеры

  • :disabled Изменение цвета значка означает, что невозможно взаимодействовать с кнопкой. Чтобы применить этот псевдокласс, выключенному свойству кнопки необходимо присвоить значение "disabled".

    Отключенная кнопка «Домой»

Настройка стиля панели приложения AppBar с помощью дополнительных цветов

Еще один пример использования стиля для панели приложения AppBar:

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

для панели приложения AppBar применяются следующие цвета:

Желтая панель приложения

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

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

Выполните указанные ниже действия, чтобы аналогично настроить панель инструментов указанным ниже образом.

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

Стили, которых следует избегать

С помощью CSS можно испортить внешний вид и удобство использования панелей приложений AppBar и панелей инструментов ToolBar. Это особенно справедливо, когда речь идет о бесперебойном функционировании анимации панели приложения AppBar и панели инструментов ToolBar. Ниже указаны известные области риска.

  • padding — Не изменяйте значения по умолчанию.

  • border — Не изменяйте значения по умолчанию.

  • margin — Изменяйте поля пропорционально, но только на элементах панели инструментов ToolBar и панели приложения AppBar:

    .win-toolbar, .win-appbar {
   margin: 3px;
}

  • background-color — Вы можете безопасно изменять стиль в областях действий и в областях переполнения:

    .win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

  • position  float — Не изменяйте стиль этих атрибутов CSS непосредственно на элементе ToolBar, но вы можете поместить элемент ToolBar в оболочку в виде родительского элемента, который изменяет стиль этих правил. Примечание  Это ограничение не применяется к панелям приложений AppBar.

     

Известные проблемы

  1. Скрытие компонента ToolBar. Следует скрывать компонент ToolBar только с помощью общедоступных API. Для скрытия нескольких компонентов обычно используется "зонтичный" класс CSS, но это не очень хорошо работает с элементами ToolBar (или AppBar). Проблема состоит в том, что производительность панели инструментов ToolBar оптимизирована для кэширования состояния размещенных на ней команд, а не для использования модели DOM для получения информации о том, видна ли какая-либо команда. Это позволяет панели инструментов ToolBar быть адаптивной и выполнять переполнение для команд, когда они не помещаются в доступной активной области, и при этом избегать браузерных макетов, требующих большого количества ресурсов и возникающих при чтении из модели DOM. Использование CSS для настройки стиля скрытых кнопок означает, что панель инструментов ToolBar не распознает, что некоторые команды были скрыты, и слишком рано начнет выполнять переполнение команд по мере уменьшения доступного пространства в активной области панели инструментов ToolBar при изменении размера окна.

    Вместо этого, чтобы отобразить и скрыть команды на панели инструментов ToolBar, следует только настроить свойство Command.hidden или вызвать метод ToolBar.showOnlyCommands().

  2. Сбой адаптивного поведения при переполнении. Адаптивное поведение панели инструментов ToolBar при переполнении работает не очень хорошо, когда элемент ToolBar должен подстраивать свой размер под размер содержимого.

    Например, компонент ToolBar разработан, чтобы существовать внутри других компонентов (обычно он размещается внутри другого элемента div). Обычно внутри собственного элемента div панель инструментов ToolBar принимает 100 % ширины своего родителя. Но если использованный родителем макет CSS вложил его в несколько гибких полей, а настраиваемый класс transportcontrols родителя использует align-items:center;, чтобы "расплющить" элемент ToolBar на ширину его команд, поведение этого элемента будет непредсказуемым. Это происходит, потому что элемент ToolBar кэширует свою width и пытается выполнить переполнение для команд, когда считает, что у него нет достаточно места для них. Элементу ToolBar необходима постоянная ширина элементов, но стили, использованные в этом сценарии, дают переменную ширину.

    Обходной путь для этого сценария (даже в сочетании с решением для скрытия компонента ToolBar) включает изменение настраиваемого класса transportcontrols родителя для использования align-items:stretch;. Тестирование показало, что это простое решение, но если по каким-либо причинам невозможно внести изменения в align-items, можно достичь конечного результата, поместив align-self:stretch непосредственно в элемент ToolBar.

Краткая сводка и дальнейшие действия

В данной статье мы показали несколько примеров изменения стиля панели приложения AppBar и панели инструментов ToolBar, а также элементов управления на них. Кроме того, мы рассказали о некоторых проблемах разработки, которые необходимо иметь в виду, чтобы вы могли избежать проблем при использовании панелей приложений AppBar и панелей инструментов ToolBar в вашем приложении.

Дополнительные —практические сведения— об изменении стиля панелей приложений AppBar и панелей инструментов ToolBar см. на веб-сайте Попробуйте WinJS. Экспериментируйте с кодом, незамедлительно оценивая результаты.

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

WinJS.UI.ToolBar

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon