如何使用 WinJS 将拆分视图窗格元素对齐到底部

Question

所以我一直在努力解决这个问题。应该有一些我明显遗漏的明显解决方案。请注意，我要找出正确的解决方案。是的，我试过 {position: absolute; bottom:0}，但看起来很糟糕。

无论如何，我正在使用 WinJS（4.3.0 版）创建拆分视图。一切看起来都很好，但我真的很喜欢将菜单项之一（或拆分视图命令，左窗格中的项目）放在底部。所以如果你去 http://winjs.azurewebsites.net/#splitview I would like to position the "settings" item to the bottom. Something like this

如果您看一下 HTML，应该很容易（我猜）。原文HTML：

<!-- {Original HTML} Pane area -->
<div>
    <div class="header">
        <button
            class="win-splitviewpanetoggle"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
        <div class="title">SplitView Pane area</div>
    </div>

    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
    </div>
</div>

我对解决方案的猜测：

<!-- {my guess for the solution} Pane area -->
<div>
    <div class="header">
        <button
            class="win-splitviewpanetoggle"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
        <div class="title">SplitView Pane area</div>
    </div>

    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
    </div>

    <!-- now I need to position this to the bottom... -->
    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
    </div>
</div>

只需使用 class 导航命令创建一个新的 div，将设置 div 移到那里并将导航命令置于底部。

但是，我无法完成此操作。我尝试了所有类型的 flex box 选项（align-self、align-items、justify content），但似乎没有任何效果。有人有什么建议吗？

谢谢！

Answer 1

我遇到了同样的问题并解决了。对我有用的是将窗格样式设置为 flexbox。导航命令项的容器具有 display: flex; 和 flex-direction: column; 样式。它还需要指定其高度：一种方法是使用 height: 100vh; 样式。

倒数第二个命令的容器具有样式 flex: 1，而其他容器具有默认样式 flex: none。这将使倒数第二个项目的容器贪婪地占据尽可能多的 space 。不幸的是，您不应该为包含命令本身的元素设置样式。我最终得到了一个非常大的亮点（笑）。

这是我基于我的应用程序代码的解决方案。我的窗格区域标记为类似于：

<body id="app" class="win-type-body" data-win-control="WinJS.UI.SplitView">
    <header>
        <menu>
            <li>
                <button data-win-control="WinJS.UI.SplitViewPaneToggle"
                data-win-options="{ splitView: select('#app') }"></button>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 1', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 2', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 3', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
            </li>
        </menu>
    </header>
    <main> ... </main>
</body>

对我有用的 CSS 类似于：

body { 
    height: 100%; 
}
header { 
    display: block; 
    white-space: nowrap; 
}
header > menu { 
    display: flex; 
    height: 100vh; 
    flex-direction: column; 
    margin: 0; padding: 0; 
}
header > menu > li { 
    display: block; 
    margin: 0; padding: 0; 
    list-stye-type: none; 
}
header > menu > li:nth-last-child(2) { 
    flex: 1; /* Put Settings on the bottom */
}
.win-splitview-pane-closed .win-splitviewcommand-label { 
  /* Make sure pane content doesn't scroll */ 
  /* if SplitViewCommand label receives focus while pane is closed. */
  visibility: hidden; 
}

希望对您有所帮助！至少它应该可以帮助那些在网上搜索时偶然发现这个问题的人，比如我自己......

如何使用 WinJS 将拆分视图窗格元素对齐到底部

How to align a split view pane element to the bottom with WinJS

css

winjs

windows-store-apps

win-universal-app