web-dev-qa-db-ja.com

Angular2で折りたたみ可能なサイドバーを実装する方法は？

私はangular2を学習しており、 https://almsaeedstudio.com/themes/AdminLTE/index2.html 、in Angular 2例を調べてみましたが、見つかりませんでした。例やドキュメントを提供していただけますか？

twitter-bootstrap-3angulartoggle
8
shaswa

Ng2-bootstrapを使用できます。

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

ソースコードがどのように実装されているかを確認することもできます。

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

3
Ferenc Kamras

Bootstrapで実行したいので、 Bootstrapcollapse で実行できます。

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

このソリューションの背後にある考え方は次のとおりです。

折りたたみ可能なコンテンツを特定のクラス内に配置します。これをcollapseMenuと呼びます。非表示かどうかを示すクラスも必要です。 Bootstrapはすでにcollapseを提供しています。

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

次に、toggler、つまりハンバーガーアイコンが必要です。クリックするたびに切り替える必要があるクラスを示すにはdata-toggleが必要であり、ターゲットにする必要のある要素collapseMenuを知るにはdata-targetが必要です。

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

[〜＃〜] css [〜＃〜]の部分は大したことではなく、さまざまな方法で実行できます。私はCSS3 flexbox アプローチが好きです。

私たちのページ（具体的には.container）は、方向行のあるフレックスになります。

.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;
}
2
zurfyx