設計應用程式列與工具列 (HTML) 的樣式

  • 發行項

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

提供如何設定 AppBar 或工具列的樣式及其控制項的範例。

先決條件

簡介

快速入門：設定控制項的樣式說明適用於 JavaScript 的 Windows Library 樣式表如何提供一組樣式，自動為您的 app 提供 Windows 10 的外觀及操作方式。下列範例示範使用階層式樣式表 (CSS) 自訂一些 AppBar 樣式。

淺色和深色佈景主題

為 app 選擇淺色或深色樣式表會影響 AppBar 的外觀，以及 app 的其他控制項。針對此 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：

淺色樣式應用程式列

工具列將因為使用相同的樣式表而具有相似外觀。

有用的 CSS 屬性

下列 CSS 屬性通常與 AppBar 和工具列控制項搭配使用：

  • 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);
}

    具備彩色命令圖示的按鈕

Pseudo-classes

您可以使用下列 Pseudo_classes 做為選取器，用來設定特定狀態的 AppBar 按鈕樣式：

  • :hover - 使用者將游標放在按鈕的圖示卻沒有按一下而啟動它，變更按鈕的背景色彩直到游標移開按鈕為止。 在暫留的同時預設也會顯示按鈕的工具提示。

    將游標暫留在圖示上方時，會在首頁按鈕上方顯示工具提示

  • :active - 使用者按下控制項到選擇某個選項的這段時間或按鈕若設定為 type="toggle" 時會啟用按鈕。

    啟用的相機按鈕

  • :disabled - 圖示色彩變更表示按鈕無法接受使用者互動。 按鈕的 disabled 屬性必須設為 "disabled"，才會套用此 pseudo-class。

    停用的首頁按鈕

使用自訂色彩設定 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 和工具列的外觀及操作方式。尤其會影響 AppBar 和工具列動畫是否能順暢運作。以下是已知的風險區域：

  • padding — 不要變更預設值。

  • border — 不要變更預設值。

  • margin — 樣式邊界均勻變化，但是只對於工具列和 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 屬性設定樣式，但是您可以將工具列包在設定規則樣式的父項元素中。注意  這項限制不適用 AppBar。

     

已知問題

  1. 隱藏工具列 - 工具列元件應該只使用公用 API 來隱藏。雖然常見的做法是使用 "umbrella" CSS 類別隱藏多個元件不被檢視，但這對於工具列 (或 AppBar) 不是很好的做法。問題在於工具列最擅長的是快取其命令狀態，而不是依賴 DOM 來判斷是否要顯示命令。這樣可讓工具列和命令在無法符合可用的使用中區域時，工具列可以變得有彈性而溢位命令，同時避免當您從 DOM 讀取時發生消耗資源的瀏覽器配置。 使用 CSS 將按鈕樣式設定為隱藏表示工具列將不會辨識某個命令已經隱藏，只要當工具列使用中區域的可用空間在視窗調整大小期間縮小時，就會太早開始溢位命令。

    相反地，您應該只設定 Command.hidden 屬性或是呼叫 ToolBar.showOnlyCommands() 方法來顯示和隱藏工具列中的命令。

  2. 彈性溢位失敗 - 工具列的彈性溢位行為無法在工具列元素設定為 [依內容調整大小] 時順暢運作。

    例如，工具列元件是設計來存在於其他元件內 (通常是以巢狀方式包含在另一個 div 元素內)。工具列通常會在自己的 div 內，佔用其父項的 100% 寬度。但是如果父項使用的 CSS 配置讓工具列巢狀在幾個彈性方塊內，且父項的自訂 transportcontrols 類別使用 align-items:center; 擠壓到工具列而讓工具列只剩下其命令的寬度，就會發生未預期的行為。 這是因為工具列會快取其 width，當工具列認為沒有足夠的空間可以使用時就會嘗試溢位命令。工具列需要固定的元素寬度，但在此案例中使用的樣式則提供彈性的寬度。

    此案例的解決方式 (甚至結合「隱藏工具列」的解決方案) 會牽涉到變更父項的自訂 transportcontrols 類別以使用 align-items:stretch;。測試顯示這是一個簡單的解決方案，但如果您因為某些原因無法變更 align-items，您可以直接將 align-self:stretch 放入工具列元素來達到最後的結果。

摘要與後續步驟

本文中我們示範了設定 AppBar 和工具列的樣式及其控制項的一些範例。我們也提供一些與設計問題相關的資訊，以避免在應用程式中使用 AppBar 和工具列時發生問題。

深入了解在試用 WinJS 網站上有關設定 AppBar 和工具列樣式的—實際操作—。試用程式碼並立即查看結果。

相關主題

WinJS.UI.ToolBar

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon