Question

我正在学习angular2并希望在Angular 2中实现类似于https://almsaeedstudio.com/themes/AdminLTE/index2.html的可折叠侧边栏？我尝试查找示例，但无法找到任何示例。你能为它提供实例或文件吗？

Answer 1

您可以使用ng2-bootstrap：

~~https://valor-software.com/ng2-bootstrap/#/accordion~~

您还可以在源代码中查看其实现方式：

~~https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion~~

Answer 2

由于您希望使用Bootstrap执行此操作，因此可以使用Bootstrap collapse执行此操作。

http://codepen.io/zurfyx/pen/ygaGyb

此解决方案背后的理念如下：

在特定类中包含可折叠内容，我们称之为collapseMenu。我们还需要一个类来指示它是否隐藏。 Bootstrap已经为我们collapse提供了它。

<li>Icon <span class="collapse collapseMenu">Home</span></li>

接下来我们需要切换器，即汉堡包图标。它需要data-toggle表示必须在每次点击时切换的类，并data-target表示必须定位的元素collapseMenu。

<button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>

CSS 部分不是什么大问题，您可以通过各种方式进行操作。我喜欢CSS3 flexbox方法。

我们的页面（特别是.container）将是带方向行的flex。

.container {
    display: flex;
    flex-direction: row;
}

然后我们将设置右侧面板以尽可能多地占用空间，因此当内容切换时，它会收缩：

.main {
    flex: 1;
}

完整的工作版本：

<强> HTML

<div class="container">
    <div class="left-panel">
        <ul>
            <li>Icon <span class="collapse collapseMenu">Home</span></li>
            <li>Icon <span class="collapse collapseMenu">Contact</span></li>
        </ul>
    </div>
    <div class="main">
        <button data-toggle="collapse" data-target=".collapseMenu">Hamburger icon</button>
    </div>
</div>

<强> CSS

body {
    margin: 0;
    padding: 0;
}

ul > li {
    display: block;
}

.collapse.in {
    display: inline-block;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: row;
    padding: 0;
}

.left-panel {
    background-color: grey;
}

.main {
    background-color: black;
    flex: 1;
}

如何在Angular2中实现可折叠侧栏？

2 个答案: