Question

我的appbar上有几个命令。我想将它们中的两个对齐到左边。我该怎么做？

我正在使用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>

Answer 1

请参阅下面的示例，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>

Answer 2

不推荐使用Sincel 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>

Answer 3

通过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;
}

Answer 4

以下是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>

如何将appbarcommands对齐到左边？

4 个答案: