Установите Гамбургер CSS на Angular - PullRequest
Новая
       40

Установите Гамбургер CSS на Angular

0 голосов
/ 31 марта 2019

Я собираюсь установить Hamburger CSS от Jonathan Suh в моем Angular Project.

Я использовал npm i --s hamburgers, который успешно добавил пакет.Я также добавил его файл CSS в мой файл angular.json.

Когда я пытаюсь добавить гамбургер, используя приведенный ниже код, гамбургер отображается, но он не активен.Это почему?

<button class="hamburger hamburger--collapse" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>

Ответы [ 2 ]

2 голосов
/ 20 апреля 2019

Шаги, чтобы следовать,

  1. установить пакет для гамбургера. npm install hamburgers --save
  2. импорт в styles.scss @import '~hamburgers/_sass/hamburgers/hamburgers.scss';
  3. использовать div гамбургера в html и переключать класс. (click)="active=!active" [ngClass]="active ? 'is-active' : ''"
2 голосов
/ 31 марта 2019

Когда вы комментируете, что используете CSS , а в doc пишите:

.scss исходные файлы доступны, если вы используете Sass в качестве CSS Препроцессор. Это настраиваемый и модульный

Вот альтернатива с угловым и css

Html 

<div class="collapse" (click)="ifShow=!ifShow" [ngClass]="{'hide':!ifShow}">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS: 

.collapse{
  position: relative;
  cursor: pointer;
}
.collapse span{
    position: absolute;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: black;
}

.collapse span:nth-child(2) {
    top: 10px;
}
.collapse span:nth-child(3){
    top: -10px;
}

.hide span:nth-child(2) {
   transform:rotate(45deg);
   top:0;
}

.hide span:nth-child(3){
   transform:rotate(-45deg);
   top: 0;
}

.hide span:nth-child(1){
  animation:hideMain 1.5s;
  opacity: 0;
}
.hide span:nth-child(2),.hide span:nth-child(3) {
  animation:hide 1.5s;
}

@keyframes hide{
  0%{
    transform:rotate(0);
  }
  50%{
    top:0;
    transform:rotate(0);
  }
}
@keyframes hideMain{
  49%{
   opacity: 1;
  }
  50%{
  opacity: 0;
  }
}

TS: 

 ifShow : boolean = true;
...