1

我的应用栏上有几个命令。我想将其中两个对齐到左侧。我该怎么做？

我正在使用 Html5/JS

基本上你如何在 HTML5/JS 中做到这一点？

<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
    <Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
            <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
            <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
            <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</AppBar>
</Page.BottomAppBar>
4

4 回答 4

5

请参阅下面的示例，section:'global'将元素向右section:'selection'对齐并将元素向左对齐。

向右对齐按钮

<button id="mybutton2" 
    data-win-control=
                "WinJS.UI.AppBarCommand"
    data-win-options="{label:'Delete',
                 icon:'delete',
                 section:'global',
                 tooltip:'Delete item'}">
  </button>

将按钮向左对齐

<button id="mybutton3" 
        data-win-control=
                     "WinJS.UI.AppBarCommand" 
        data-win-options="{id:'cmdCamera',
                  label:'Camera',
                  icon:'camera',
                  section:'selection',
                  tooltip:'Take a picture'}">
     </button>
于 2012-10-19T01:19:44.590 回答
0

由于global不推荐使用，我无法弄清楚如何从左到右对齐命令按钮。我找到的唯一解决方案是添加额外的按钮并删除它们的标签和图标。
我知道这很丑，但必须找到解决方法，这是我必须选择的。

<div class="toolbar" data-win-control="WinJS.UI.ToolBar">
        <!-- Primary commands -->
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdMentions',
            label:'Mentions',
            type:'button',
            icon: 'accounts'
            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdBlocked',
            label:'Blocked Accounts',
            type:'button',
            icon: 'blockcontact'
            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdConfig',
             label:'Configuration',
            icon: 'edit'
            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdConfig1'
            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdConfig2'

            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdConfig3'

            }"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdConfig4'

            }"></button>
    </div>
于 2016-02-11T01:09:20.993 回答
0

只需通过 CSS 设置它就可以了。HTML：

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit'}"></button>

CSS：

#cmdEdit{
    position:absolute;
    left:50px;
}
于 2016-10-05T12:07:15.180 回答
-1

这是来自 CodeShow 的一个很好的示例。这完美地工作。

        <button
            data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd',label:'Add',icon:'add', section:'global',tooltip:'Add item'}"></button>
        <button
            data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove', section:'global',tooltip:'Remove item'}"
            onclick="appbar2.remove()"></button>
        <hr />

            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete', section:'global',tooltip:'Delete item'}"></button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera', section:'selection',tooltip:'Take a picture'}"></button>
于 2016-07-14T19:47:24.863 回答