Wie zu implementieren Collapsible Seitenleiste in Angular2?

Question

Ich lerne angle2 und versuche, eine kollabierbare Sidebar, ähnlich wie https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2 zu implementieren? Ich habe versucht, Beispiele nachzuschlagen, konnte aber keine finden. Können Sie Beispiele oder Dokumentationen dafür bereitstellen?

Answer 1

könnten Sie verwenden NG2-Bootstrap:

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

Sie können auch im Quellcode überprüfen, wie es umgesetzt:

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

Answer 2

Da Sie tun möchten, es mit Bootstrap, können Sie es mit Bootstrap collapse tun.

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

Die Idee hinter dieser Lösung ist die folgende:

Haben Sie Ihren zusammenklappbar Inhalt innerhalb einer bestimmten Klasse, wir es collapseMenu genannt. Wir brauchen auch eine Klasse, die anzeigt, ob sie versteckt ist oder nicht. Bootstrap liefert es bereits für uns collapse.

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

Als nächstes müssen wir die toggler, das Hamburger Symbol, das ist. Es erfordert data-toggle, um die Klasse anzugeben, die bei jedem Klick umgeschaltet werden muss, und data-target, um das/die Element (e) zu kennen, die das Ziel haben soll, collapseMenu.

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

Der CSS Teil ist keine große Sache, und man kann es auf verschiedene Weise tun. Ich mag die CSS3 flexbox Ansatz.

Unsere Seite (speziell .container), wird eine Flex mit Richtung Zeile sein.

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

Dann werden wir die richtige Platte gesetzt so viel Platz wie möglich zu nehmen, um, wenn der Inhalt umgeschaltet wird, schrumpft:

.main { 
    flex: 1; 
} 

---

komplette Arbeitsversion:

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