我已经使用javaScript为Windows8应用程序创建了一个应用栏。
我想将appbar按钮的标签放在appbar图标旁边,而不是在appbar图标下方。
谁能告诉我是否有可能。如果是,怎么办?
最佳答案
首先,我会有点警惕以这种方式更改默认行为,因为它会偏离用户使用平台上大多数其他应用程序的体验。就是说,我认为这至少应该是可行的。
这里有几种方法可以考虑,而不是我认为任何“最佳”方法,但是它们可能是您入门的地方:
查看生成的对象的结构(可以在Blend中使用“交互模式”),您可以看到命令是两个堆叠的span标记(一个包含图标和圆圈,另一个包含命令文本)。在WinJS.UI.AppBar文档中,您可以为这些跨度设置样式,但是由于跨度是嵌入式元素,因此我不认为您可以将其垂直移动以使其位于按钮旁边。您可以稍微玩margin-right
和margin-left
。
现在,另一个选择是尝试重写所生成的DOM,以便您将表示形式丢弃为span标签并自己构建一些东西,但这涉及很多工作,但脆弱性未知。
第三种选择大致相当于修改DOM的设计时。创建自定义布局,而不是使用AppBar的默认行为。例如,以下标记(不是生产质量,带有内联样式和all :)将产生随后的图像:
<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 Dev Center上会有一个AppBar sample可能对您也有帮助。