將appBar按鈕的標籤放置在圖標圖像旁邊，而不是圖標圖像的下方

Question

我已經使用javaScript爲我的windows8應用程序創建了一個appbar。

我想把appbar按鈕的標籤除了appbar圖標之外，而不是appbar圖標下面。

任何一個PLZ都可以告訴我它是否可能。如果是，如何？

Answer 1

首先，我會對以這種方式更改默認行爲保持警惕，因爲它會偏離用戶在平臺上與大多數其他應用程序的體驗。這就是說，我認爲至少應該以一種方式實現。

這裏有一些辦法來考慮，而不是我考慮任何「最佳」，但他們可能是你開始的地方：

縱觀生成對象的結構（您可以使用交互模式在Blend中），您可以看到該命令是兩個堆疊的span標籤（一個包含圖標和圓圈，另一個包含命令文本）。從WinJS.UI.AppBar文檔中，您可以對這些跨度進行樣式設置，但由於跨度是內嵌元素，因此我不相信您可以垂直移動它以使其位於按鈕旁邊。雖然你可以玩margin-right和margin-left。

現在另一種選擇是嘗試重寫生成的DOM，以便將表示形式作爲span標記丟棄並自行構建，但這對於未知的脆弱性有很多工作。

第三個選項大致相當於修改DOM的設計時間。而不是使用AppBar的默認行爲，請創建一個自定義佈局。例如，下面的標記（這不是產品質量，用線風格和所有:)）產生然後沿着圖像：

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout: 'custom'}"> 
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', icon:'placeholder'}" type="button"></button> 
    <span style="margin-left: -28px; font-size: 0.8em">Command 1</span> 
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', icon:'placeholder'}" type="button"></button> 
    <span style="margin-left: -28px; font-size: 0.8em">Command 2</span> 
</div> 

有在Windows的AppBar sample開發中心也可以幫助你，如果你去自定義路線。