web-dev-qa-db-fra.com

Comment implémenter la barre latérale pliante dans Angular2?

J'apprends angular2 et souhaite implémenter une barre latérale pliable, similaire à https://almsaeedstudio.com/themes/AdminLTE/index2.html , in Angular 2? J'ai essayé de chercher des exemples mais je n'ai trouvé aucun exemple. Pouvez-vous fournir des exemples ou de la documentation à ce sujet?

twitter-bootstrap-3angulartoggle
8
shaswa

Vous pouvez utiliser ng2-bootstrap:

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

Vous pouvez également vérifier dans le code source comment il est implémenté:

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

3
Ferenc Kamras

Puisque vous voulez le faire avec Bootstrap, vous pouvez le faire avec Bootstrap collapse .

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

L'idée derrière cette solution est la suivante:

Avoir votre contenu pliable dans une classe spécifique, nous l'avons appelé collapseMenu. Nous avons également besoin d’une classe qui indique si elle est cachée ou non. Bootstrap le fournit déjà pour nous collapse.

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

Ensuite, nous avons besoin de toggler , l’icône hamburger qui est. Il nécessite un data-toggle pour indiquer la classe à basculer à chaque clic et un data-target pour connaître le ou les éléments à cibler, collapseMenu.

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

La partieCSSn’est pas un problème, et vous pouvez le faire de différentes manières. J'aime l'approche CSS3 flexbox .

Notre page (en particulier .container) sera une ligne flex avec direction.

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

Ensuite, nous allons configurer le panneau de droite de manière à occuper le plus d’espace possible. Ainsi, lorsque le contenu est basculé, il est réduit:

.main {
    flex: 1;
}

Version de travail complète:

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