elementUi、iview、ant Design源码button结构篇
在看elementUI的button组件的时候,一起和iview、ant Design的button组件比
较功能、样式、代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功能那些会
用到哪些会相对比较好。
我们先来看这三个UI的button对外开放的功能结构:
elementUI button:

iview button:

ant Design button:

可以看出iview和ant Desgin的button的功能很像,而element的button的功能少了个a标签的功能,感觉button转换a标签的功能用到的不多。后面看具体button样式代码会发现iview和ant Desgin更像,所有之前有看到说iview抄袭element感觉只是无中生有,那iview和ant Desgin到底是谁借鉴谁的也没必要深究,本身开源项目借鉴代码风格规范是很正常的,在加上一个常用组件常用功能翻来覆去就那些固定的。
三个UI的button样式结构:
elementUI button.scss

iview button.less

ant Desgin button.less

我可以看到iview和ant Desgin的button的样式都是用less而且结构包括mixins和button、命名都非常相似,elementUI的button样式用sass来写的。后续计划解析组件分elementUI、iview、ant Desgin的整体功能、样式结构篇;elementUI、iview、ant Desgin的样式详细篇;elementUI、iview、ant Desgin的功能代码详细篇三部分入手。这篇就介绍button在三大UI框架的功能、样式整天结构。下一片就是看三大UI框架样式详细篇。
elementUi、iview、ant Design源码button结构篇的更多相关文章
- element-ui Collapse 折叠面板源码分析整理笔记(十)
Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...
- 产品打包工具的制作,ant,编译源码,打jar包,打tag,打war包,备份release版本等
1. 在进行打包工具的制作前,需要准备的软件有: svnant-1.3.1 作用是让ant和svn相关联 apache-ant-1.9.7 需要设置ant_home,path,我的配置是: ANT_ ...
- JUC并发编程基石AQS源码之结构篇
前言 AQS(AbstractQueuedSynchronizer)算是JUC包中最重要的一个类了,如果你想了解JUC提供的并发编程工具类的代码逻辑,这个类绝对是你绕不过的.我相信如果你是第一次看AQ ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- 修改ElementUI源码实践
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...
- element-ui 组件源码分析整理笔记目录
element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...
- Tomcat源码导入eclipse的步骤
Tomcat源码导入eclipse 一.下载源码 1. 进入Apache 官网:http://tomcat.apache.org/ 2. 在左边侧选择要下载的源码的版本. 3. 或者直接通过Ar ...
- 基于MVVM的知乎日报应用安卓源码
使用data binding , dagger2 , retrofit2和rxjava实现的,基于MVVM的知乎日报APP运行效果: <ignore_js_op> 使用说明: 项目结构 a ...
- Memcached源码分析之从SET命令开始说起
作者:Calix 如果直接把memcached的源码从main函数开始说,恐怕会有点头大,所以这里以一句经典的“SET”命令简单地开个头,算是回忆一下memcached的作用,后面的结构篇中关于命令解 ...
随机推荐
- C# 三种打印方式含代码
一:C#代码直接打印pdf文件(打印质保书pdf文件) 引用: 代码注释很详细了. private void btn_pdf_Click(object sender, RoutedEventArgs ...
- 磁盘阵列raid类型及含义
raid0: 多块盘同时进行读写: 优点是读写效率高,缺点是没有数据冗余: 最少需要两块盘. raid1: 将数据盘都做镜像: 优点是有数据冗余:缺点是读写效率低,磁盘利用率低: 最少需要两块盘. r ...
- centos6.7 配置Elasticsearch
Elasticsearch(以下简称ES),是一款开源的全文搜索引擎,获得了广泛的应用.这篇博客将介绍在centos6.7上如何配置ES. 一.安装JAVA环境 centos默认安装了JAVA环境,首 ...
- MySQL学习(三)主备分库分表和恢复数据 --- 2019年2月
1.MySQL主备切换 readonly 设置对超级(super)权限是无效的,而用于同步更新的线程,就拥有超级权限. 建议在做主备数据库的时候,将备用数据库设置为只读.(反向用readonly来判断 ...
- android客户端向服务器发送请求中文乱码的问
android客户端向服务器发送请求的时候,并将参数保存到数据库时遇到了中文乱码的问题: 解决方法: url = "http://xxxx.com/Orders/saveorder.html ...
- mac 下常用命令备忘录
1.查看端口号 lsof -i: 2.杀死进程 kill 41321 3.查看文件夹文件 ls ls -l //看到文件及文件夹更多的内容 ls -a //隐藏的文件 ls -la //上面的组合 4 ...
- 基于mapreduce实现图的三角形计数
源代码放在我的github上,想细致了解的可以访问:TriangleCount on github 一.实验要求 1.1 实验背景 图的三角形计数问题是一个基本的图计算问题,是很多复杂 ...
- TypeScript|Angular踩坑笔记
今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...
- SLAM+语音机器人DIY系列:(一)Linux基础——1.Linux简介
摘要 由于机器人SLAM.自动导航.语音交互这一系列算法都在机器人操作系统ROS中有很好的支持,所以后续的章节中都会使用ROS来组织构建代码:而ROS又是安装在Linux发行版ubuntu系统之上的, ...
- redis.conf常用配置说明
最近学了 Redis,在 Linux 上安装的,接下来就简单讲解一下修改 Redis 配置文件 修改密码: 新安装的 Redis 是默认没有密码的,可以给Redis设置一个密码 先进入 Redis 的 ...