Ant Design of Angular NG-ZORRO 增加Bootstrap按钮样式

最新推荐文章于 2023-02-18 08:03:58 发布

Donjan

最新推荐文章于 2023-02-18 08:03:58 发布

阅读量1k

点赞数

分类专栏： Angular 文章标签： Ant Design Angular NG-ZORRO

本文链接：https://blog.csdn.net/donjan/article/details/103509447

版权

Angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ANG-ZORRO UI功能比较全面，也非常好上手，但按钮的样式太少了，想像Bootstrap那样多几个状态按钮。

打开src的theme.less 添加按钮样式：

.ant-btn-warning{
  color: rgba(0, 0, 0, 0.65);
  background-color:#fffbe6;
  border-color:#ffe58f
}
.ant-btn-info{
  color: rgba(0, 0, 0, 0.65);
  background-color:#e6f7ff;
  border-color:#91d5ff
}
.ant-btn-success{
  color: rgba(0, 0, 0, 0.65);
  background-color:#f6ffed;
  border-color:#b7eb8f
}
.ant-btn-error{
  color: rgba(0, 0, 0, 0.65);
  background-color:#fff1f0;
  border-color:#ffa39e
}

就可以使用了

<button nz-button nzType="warning">Warning</button>
<button nz-button nzType="info">Info</button>
<button nz-button nzType="success">Success</button>
<button nz-button nzType="error">Error</button>