将appBar按钮的标签放在图标图像旁边而不是图标图像下方

Question

我使用javaScript为我的windows8应用程序创建了一个appbar。

我想在appbar图标旁边放置appbar按钮的标签，而不是appbar图标下方。

任何人都可以告诉我是否可能。如果是，怎么样？

Answer 1

首先，我有点担心以这种方式更改默认行为，因为它会偏离用户与平台上大多数其他应用程序的体验。也就是说，我认为它应该是可行的，至少在某种程度上。

以下是一些需要考虑的方法，而不是我认为任何“最佳”方法，但它们可能是您的起点：

查看生成对象的结构（可以在Blend中使用交互模式），您可以看到命令是两个堆叠的span标记（一个包含图标和圆圈，另一个包含命令文本）。从WinJS.UI.AppBar doc，您可以设置这些范围的样式，但由于span是一个内嵌元素，我不相信您可以垂直移动它以使其位于按钮旁边。您可以稍微使用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，如果您使用自定义路线，也可以为您提供帮助。