Как реализовать Складную боковую панель в Angular2?

Question

Я изучаю угловую2 и смотрю, чтобы реализовать разборную боковую панель, похожую на https://almsaeedstudio.com/themes/AdminLTE/index2.html, в Angular 2? Я попытался найти примеры, но не смог найти их. Можете ли вы предоставить примеры или документацию для этого?

Answer 1

Вы можете использовать NG2-самозагрузки:

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), будет гибкой с указанием направления.

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