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

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>

接下来我们需要 toggler，即汉堡包图标。它需要一个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;
}