1

アプリバーにいくつかのコマンドがあります。2つを左に揃えたい。どうすればいいですか？

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で設定するだけでOKです。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 に答える