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

Question

我正在学习angular2，希望实现一个可折叠的侧边栏，类似于https://almsaeedstudio.com/themes/AdminLTE/index2.html，在Angular 2中？我尝试查找示例但没有找到。你可以提供示例或文档吗？

- shaswa

---

我在Angular 1.x中写了类似的东西，希望这可以帮到你，https://github.com/postor/ng-collpase，示例：http://plnkr.co/edit/QFp379dEFQhKGRxmJz7p?p=preview - Josh Lin

@shaswa，你最终找到解决方案了吗？ - TechCrunch

Answer 1

您可以使用ng2-bootstrap：

您也可以查看源代码如何实现：

请参考以下链接：https://valor-software.com/ng2-bootstrap/#/accordion。

源代码可在以下链接中找到：https://github.com/valor-software/ng2-bootstrap/tree/development/components/accordion。

- Ferenc Kamras

---

这个例子虽然折叠了整个div/sidebar，但我仍希望在折叠时能像https://almsaeedstudio.com/themes/AdminLTE/index2.html中一样显示菜单图标。 - shaswa

Answer 2

由于您想要使用Bootstrap，您可以使用Bootstrap折叠来实现。

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

- zurfyx