在Angular上安装Hamburger CSS

9 浏览
0 Comments

在Angular上安装Hamburger CSS

我打算在我的Angular项目中安装Jonathan Suh的Hamburger CSS。

我使用了npm i --s hamburgers成功添加了该包。我还将其CSS文件添加到了我的angular.json文件中。

当我尝试使用下面的代码添加一个汉堡包时，汉堡包会显示出来，但无法点击。为什么会这样？

0

2 答案

0 Comments

问题的出现原因：

问题是关于在Angular上安装Hamburger CSS的方法。提问者在评论中提到他正在使用CSS，并且在文档中写道，如果你使用Sass作为CSS预编译器，那么可以使用.scss源文件。并且这个Hamburger CSS是可定制和模块化的。

解决方法：

下面是一个使用Angular和CSS的替代方法的链接：点击这里查看

HTML代码：

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;
}
.hide{
  0%{
    transform:rotate(0);
  }
  50%{
    top:0;
    transform:rotate(0);
  }
}
.hideMain{
  49%{
   opacity: 1;
  }
  50%{
  opacity: 0;
  }
}

TS代码：

ifShow : boolean = true;

0
0 Comments

如何在 Angular 中安装 Hamburger CSS

  1. 首先，在终端中运行以下命令来安装 Hamburger package：

    npm install hamburgers --save

  2. 然后，在 styles.scss 文件中导入 Hamburger CSS：

    @import '~hamburgers/_sass/hamburgers/hamburgers.scss';

  3. 接下来，在 HTML 文件中使用 Hamburger div 并切换类：

    (click)="active=!active" [ngClass]="active ? 'is-active' : ''"

通过按照上述步骤，您可以在 Angular 项目中成功安装和使用 Hamburger CSS。

0