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ę?Jak zaimplementować Składany pasek boczny w Angular2?
Odpowiedz
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
Przykład jednak powoduje zwinięcie całego div/paska bocznego. Nadal chcę być w stanie pokazać ikonę menu po zwinięciu, jak w https://almsaeedstudio.com/themes/AdminLTE/index2.html – shaswa
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;
}
- 1. Jak zaimplementować pasek boczny w Zend Framework
- 2. Jak poprawnie zaimplementować stały pasek boczny?
- 3. Jak ukryć pasek boczny w bootstrapie domyślnie?
- 4. W jaki sposób można zaimplementować pasek boczny podobny do Mail/iTunes/Finder/etc w Cocoa/IB?
- 5. CSS: Pasek boczny 100% wysokość bez przewijania
- 6. Jak utworzyć stały/przyklejony pasek boczny w CSS/JS?
- 7. Jak zaimplementować przeciąganie i upuszczanie w Angular2?
- 8. Jak utworzyć pasek boczny podobny do aplikacji Facebook na iOS?
- 9. Pozioma reguła hr() w R Błyszczący pasek boczny
- 10. Poprawiono pasek boczny z wysokości 100% w CSS
- 11. Przekształcanie jQuery w kątowy, stały pasek boczny nie działa (?)
- 12. Spis treści (pasek boczny) książki pomocy aplikacji Cocoa
- 13. Stały pasek boczny pozycji z oddzielnym paskiem przewijania?
- 14. Wysublimowany tekst 2: nawigator klasy lub pasek boczny przeglądarki
- 15. Jak zaimplementować pionowy przesuwny pasek akcji (jak w aplikacji grofers)
- 16. Jak zaimplementować Custom Async Validator w Angular2/4/5
- 17. Składany panel w HTML/CSS
- 18. Importuj pasek przy użyciu Angular2 i stripe.js
- 19. Jak zaimplementować pasek fotografii w stylu aplikacji na WP7?
- 20. Tylko składany narożnik CSS
- 21. Jak zaimplementować pasek postępu przy użyciu wzorca MVVM
- 22. Jak zaimplementować pasek postępu za pomocą Spring 3 MVC?
- 23. Jak zaimplementować pasek śledzenia podobny do tego obrazu - Android?
- 24. Jak zaimplementować funkcję paska bocznego na pasku narzędzi serwisu Spotify iOS
- 25. Stwórz pasek boczny podobny do przeglądarki Dolphin lub Firefox w Androidzie
- 26. Jak wykonać wiele widoków za pomocą Angular, aby obsługiwać nagłówek i pasek boczny?
- 27. Jak naprawić pasek boczny i nagłówek za pomocą CSS dla JS i jQuery Scroller
- 28. Składany bootstrap, pokaż pierwszy element
- 29. Case Sensitive Accent składany w JavaScript
- 30. 100% lewy górny pasek boczny z dynamiczną właściwą treścią - Bootstrap + Wordpress
napisałem coś podobnego w kątowym 1.x, nadzieję, że może to pomóc, https: //github.com/postor/ng-collpase, przykład: http: //plnkr.co/edit/QFp379dEFQhKGRxmJz7p? p = preview –
@shaswa czy znalazłeś rozwiązanie w końcu? – TechCrunch