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

举报
红目香薰 发表于 2022/09/29 15:45:46 2022/09/29
1.4k+ 0 0
【摘要】 ​ ​编辑vue-ant design示例大全——a-icon与分隔符本地css/js资源目录vue-ant design示例大全——a-icon与分隔符本地css/js资源a-icon使用品牌图标简易标签通用图标分隔符a-icon使用官网中icon的列表,这个咱们使用a-icon标签,需要复制提供的示例前缀进行使用即可。示例:官网复制标签:<smile-outlined /> 实际使用标签...

 编辑

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>

效果:

编辑

官网提示:

编辑

品牌图标

编辑

简易标签

编辑

通用图标

参数 说明 类型 默认值 版本
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>                        

 编辑

分隔符

  • 对不同章节的文本段落进行分割。
  • 对行内文字/链接进行分割,例如表格的操作列。
<div>
	<a-divider style="height: 2px; background-color: skyblue" />
	<a-divider type="vertical" style="height: 60px; background-color: lightblue" />
</div>

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。