代码之家 › 专栏 › 技术社区 › João Louros

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

win-universal-app winjs windows-store-apps css

João Louros · 技术社区 · 9 年前

所以我一直在为解决这个问题而斗争了很长一段时间。应该有一些显而易见的解决方案,但我显然没有找到。请注意,我要找出正确的解决方案。是的,我试过了 {position: absolute; bottom:0} 但这看起来很糟糕。

无论如何,我正在使用WinJS(4.3.0版)创建一个拆分视图。一切看起来都很好,但我真的很喜欢将其中一个菜单项(或拆分视图命令,左侧窗格上的项)放在底部。所以如果你去 http://winjs.azurewebsites.net/#splitview 我想把“设置”项放在底部。像这样的东西

如果你看一下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>

只需使用类nav命令创建一个新的div,将设置div移动到那里,然后将nav命令放在底部。

然而,我无法做到这一点。我尝试了所有类型的弹性框选项(对齐自己、对齐项目、调整内容),但似乎没有任何效果。有人建议吗?

谢谢

1 回复 | 直到 9 年前

Jimmy 9 年前

我也有同样的问题,并解决了。对我来说,有效的方法是将窗格设置为柔性框。nav命令项的容器具有 display: flex; 和 flex-direction: column; 样式。它还需要指定高度:一种方法是使用 height: 100vh; 风格

倒数第二个命令的容器具有样式 flex: 1 ,而其他具有默认值 flex: none 。这将使倒数第二个项目的容器贪婪地占用尽可能多的空间。不幸的是,您不应该设置包含命令本身的元素的样式。我最后得到了一个非常大的亮点(lol)。

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

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

我希望这有帮助!至少它可以帮助其他在网上搜索时偶然发现这个问题的人,比如我自己。。。