前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-ant design示例大全——icon与分隔符本地css/js资源

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

作者头像
红目香薰
发布2022-11-30 19:26:35
1.6K0
发布2022-11-30 19:26:35
举报
文章被收录于专栏:CSDNToQQCode

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


目录

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

a-icon使用

品牌图标

简易标签

通用图标

分隔符


a-icon使用

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

示例:

官网复制标签:

代码语言:javascript
复制
<smile-outlined />

 实际使用标签:

代码语言:javascript
复制
<a-icon type="smile"></a-icon>

效果:

官网提示:

品牌图标

简易标签

通用图标

参数

说明

类型

默认值

版本

rotate

图标旋转角度(IE9 无效)

number

-

spin

是否有旋转动画

boolean

false

style

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

CSSProperties

-

twoToneColor

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

string (十六进制颜色)

-

代码语言:javascript
复制
<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>                        

分隔符

  • 对不同章节的文本段落进行分割。
  • 对行内文字/链接进行分割,例如表格的操作列。
代码语言:javascript
复制
<div>
	<a-divider style="height: 2px; background-color: skyblue" />
	<a-divider type="vertical" style="height: 60px; background-color: lightblue" />
</div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue-ant design示例大全——a-icon与分隔符本地css/js资源
  • a-icon使用
  • 品牌图标
  • 简易标签
    • 通用图标
    • 分隔符
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档