Come implementare la barra laterale pieghevole in Angular2?

Question

Sto imparando angular2 e sto cercando di implementare una barra laterale comprimibile, simile a https://almsaeedstudio.com/themes/AdminLTE/index2.html, in Angular 2? Ho provato a cercare gli esempi ma non sono riuscito a trovarne. Potete fornire esempi o documentazione per questo?

Answer 1

Si potrebbe usare NG2-bootstrap:

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

È inoltre possibile controllare il codice sorgente di come viene implementato:

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

Answer 2

Dal momento che si vuole fare con Bootstrap, puoi farlo con Bootstrap collapse.

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

L'idea alla base di questa soluzione è la seguente:

avere il vostro contenuti collassabile all'interno di una classe specifica, abbiamo chiamato collapseMenu. Abbiamo anche bisogno di una classe che indicherà se è nascosta o meno. Bootstrap fornisce già per noi collapse.

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

Avanti abbiamo bisogno del, l'icona toggler hamburger che è. Richiede un data-toggle per indicare la classe che deve commutare su ciascun clic e un data-target per conoscere l'elemento o gli elementi che devono essere targetizzati, collapseMenu.

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

Il CSS parte non è un grosso problema, e lo si può fare in vari modi. Mi piace l'approccio CSS3 flexbox.

La nostra pagina (in particolare .container), sarà un flex con riga di direzione.

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

Poi imposteremo il pannello diritto di prendere più spazio in quanto si può, in modo da quando il contenuto viene alternata, si restringe:

.main { 
    flex: 1; 
} 

---

versione di lavoro completo:

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