Element-Ui组件（二）Icon 图标

本文参考Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component

基本用法
Element内置丰富的图标库，主要有以下2种用法：

设置类名el-icon-xxx，通常使用i元素
在Element部分组件中设置icon属性

页面效果
以下是通过上述两种用法制作的简单导航工具条：

示例代码

<template><el-row><el-col :span="6" class="title"><b><i class="el-icon-eleme" /> Element图标应用</b></el-col><el-col :span="6"><el-link icon="el-icon-s-home" type="primary">主页</el-link>&nbsp;<el-link><i class="el-icon-user-solid"></i> 个人设置</el-link></el-col><el-col :span="6"><el-input suffix-icon="el-icon-search" size="mini"/></el-col><el-col :span="5" :offset="1"><el-button icon="el-icon-upload" type="primary" size="mini">登录</el-button><el-button size="mini"><i class="el-icon-edit"></i> 注册</el-button></el-col></el-row>
</template><script>
export default {
}
</script><style>
.title {color: #409EFF
}
</style>

内置图标
以下为Element 2.8.2版本提供的所有图标：

Element-Ui组件（二）Icon 图标相关推荐

Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
如何使用Element Plus 提供的Icon图标库
文章目录前言一.安装二.使用 1.引入需要的图标 2.页面效果 3.还有一个奇怪的问题总结前言用vue3开发的时候,使用element-plus UI组件库的时候,发现不能像之前vue2时 ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
Element ui 组件库使用技巧。
按需引入 babel文件配置. 配置 babel.config.js文件可以创建一个js 特意来存放我们需要的 element 组件. 在main.js 文件中全局引入上面存放组件的 js ...
解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
千锋ui设计基础视频教程icon图标入门篇
Icon图标设计是ui设计师所要掌握和学习的基础技能.说到icon图标,我们不得不提及icon图标的用途. 一方面,它具有浓厚营销色彩.为什么这么说?当用户首次看到应用时,图标就是他们最先看到的东西 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1)element-ico ...
element ui组件的element.style怎么改？
比如抽屉(el-drawer)的element.style的width 方法1:修改element组件自带的属性 <el-drawer size="60%"> 如果没有 ...

Element-Ui组件（二）Icon 图标

Element-Ui组件（二）Icon 图标

Element-Ui组件（二）Icon 图标相关推荐

最新文章

热门文章