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

【问题标题】：put label of appBar button beside the icon image instead of below the icon image将 appBar 按钮的标签放在图标图像旁边而不是图标图像下方
【发布时间】：2013-01-21 09:45:17
【问题描述】：

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

我想将应用栏按钮的标签放在应用栏图标旁边，而不是在应用栏图标下方。

谁能告诉我这是否可能。如果是，怎么做？

【问题讨论】：

标签： javascript windows-8 appbar

【解决方案1】：

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

这里有几种方法可供考虑，并不是我认为任何“最佳”方法，但它们可能是您开始的地方：

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

【讨论】：