Jak zaimplementować Składany pasek boczny w Angular2?

Question

Uczę się kąta2 i chcę wdrożyć składany pasek boczny, podobny do https://almsaeedstudio.com/themes/AdminLTE/index2.html, w Angular 2? Próbowałem wyszukiwać przykłady, ale nie mogłem ich znaleźć. Czy możesz podać przykłady lub dokumentację?

Answer 1

Można użyć NG2-bootstrap:

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

Można również sprawdzić w kodzie źródłowym, jak to jest realizowane:

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

Answer 2

Ponieważ chcesz zrobić to z Bootstrap, możesz to zrobić z Bootstrap collapse.

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

Ideą tego rozwiązania jest następująca:

Wyraź swoją składaną treść wewnątrz określonej klasy, nazwaliśmy go collapseMenu. Potrzebujemy również klasy, która wskaże, czy jest ukryta, czy nie. Bootstrap już zapewnia to dla nas collapse.

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

Następny potrzebujemy, ikona Toggler hamburger to jest. Wymaga to data-toggle, aby wskazać klasę, która ma przełączać się przy każdym kliknięciu, i data-target, aby poznać element (y), na który ma trafić, collapseMenu.

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

CSS część nie jest wielka sprawa, a można to zrobić na różne sposoby. Podoba mi się podejście CSS3 flexbox.

Nasza strona (konkretnie .container), będzie elastyczna z rzędem kierunków.

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

Potem ustawić prawy panel wziąć tak dużo miejsca jak to możliwe, tak jak wtedy, gdy zawartość jest przełączana, to kurczy:

.main { 
    flex: 1; 
} 

---

pełna wersja robocza:

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