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的作用,后面的结构篇中关于命令解 ...
随机推荐
- 【JavaScript动画基础】学习笔记(一)-- 旋转箭头
随着鼠标的移动旋转箭头. requestAnimationFrame 在requestAnimationFrame之前我们可以用setInterval来实现动画的循环: function drawFr ...
- 【STM32H7教程】第2章 STM32H7的开发环境搭建
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第2章 STM32H7的开发环境搭建 本章主要为大 ...
- Python300篇电子书免费送
此电子书集合由猪哥整理,免费发布于微信公众号:裸睡的猪. 此电子书集合将持续更新,获取最新电子书集合请关注微信公众号:裸睡的猪,回复:电子书此电子书集合仅用作个人学习,请勿用于商业获利!!! 获取方式 ...
- 三分钟学会.NET微服务之Polly
熔断降级是一个非常重要的概念,我们先说一下什么是熔断降级,咱们都知道服务发现,一个有问题的服务器没来得急注销过一会就崩溃掉了,那么我们的请求就有可能访问一个已经崩溃的服务器,那么就会请求失败,因为已经 ...
- Hadoop伪分布式集群搭建
声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 1.下载Hadoop压缩包 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop- ...
- 在AspNetMvc中使用日志面板. Logdashboard 1.1beta
Logdashboard 1.1beta. 在AspNetMvc中使用日志面板 Logdashboard是Net下的日志面板,它支持AspNet与AspNetCore项目.关于更多LogDashboa ...
- docker(3)容器管理命令
接着上一篇,今天说一下Docker 有关容器的常用命令.算是比较详细了吧. docker run 命令: 注:此命令作用是使用一个镜像运行启动一个容器. 在启动运行的时候 会检查docker 中是否 ...
- iis正确安装了,但是还是无法访问,这是iis和.net安装顺序问题,记录一下
正确顺序:先安装iis,后安装net 如果没有按照正常顺序进行安装的,可能就无法访问了,这就需要手动 注册asp.net 4.0 到iis ,可以使用此命令重新注册一下: 32位的Windows: 1 ...
- winform登录功能
private void btnLogin_Click(object sender, EventArgs e) { string username = txtUserName.Text; string ...
- spring aop中pointcut表达式完整版
spring aop中pointcut表达式完整版 本文主要介绍spring aop中9种切入点表达式的写法 execute within this target args @target @with ...