0
点赞
收藏
分享

微信扫一扫

vue-ant design示例大全——icon与分隔符本地css/js资源


vue-ant design示例大全——icon与分隔符本地css/js资源_vue.js

vue-ant design示例大全——a-icon与分隔符本地css/js资源

目录

​​vue-ant design示例大全——a-icon与分隔符本地css/js资源​​

​​a-icon使用​​

​​品牌图标​​

​​简易标签​​

​​通用图标​​

​​分隔符​​

a-icon使用

官网中icon的列表,这个咱们使用a-icon标签,需要复制提供的示例前缀进行使用即可。

示例:

官网复制标签:

<smile-outlined />

 实际使用标签:

<a-icon type="smile"></a-icon>

效果:

vue-ant design示例大全——icon与分隔符本地css/js资源_css_02

官网提示:

vue-ant design示例大全——icon与分隔符本地css/js资源_javascript_03

品牌图标

vue-ant design示例大全——icon与分隔符本地css/js资源_javascript_04

简易标签

vue-ant design示例大全——icon与分隔符本地css/js资源_vue.js_05

通用图标

参数

说明

类型

默认值

版本

rotate

图标旋转角度(IE9 无效)

number

-

spin

是否有旋转动画

boolean

false

style

设置图标的样式,例如 ​​fontSize​​​ 和 ​​color​

CSSProperties

-

twoToneColor

仅适用双色图标。设置双色图标的主要颜色

string (十六进制颜色)

-

<a-icon type="message"></a-icon>                     
<a-icon type="edit"></a-icon>
<a-icon type="block"></a-icon>
<a-icon type="key"></a-icon>
<a-icon type="wifi"></a-icon>
<a-icon type="wechat"></a-icon>
<a-icon type="qq" style="font-size: 3rem;"></a-icon>
<a-icon type="taobao"></a-icon>
<a-icon type="zhihu"></a-icon>
<a-icon type="ie"></a-icon>
<a-icon type="book"></a-icon>

 

vue-ant design示例大全——icon与分隔符本地css/js资源_javascript_06

分隔符

  • 对不同章节的文本段落进行分割。
  • 对行内文字/链接进行分割,例如表格的操作列。

<div>
<a-divider style="height: 2px; background-color: skyblue" />
<a-divider type="vertical" style="height: 60px; background-color: lightblue" />
</div>

举报

相关推荐

0 条评论