前言标签栏组件是什么样子的呢？ 看下图： 下面我将分析如何实现效果 本文将不会给出具体的代码实现，但是会绘画出设计流程 实现布局 首先我们来说说布局，父组件其实只是一个容器组件，我们对它进行flex布局，并用 flex = 1 根据子元素个数等分其宽度 子组件内部有2个元素，一个图标，对应图标 ...

前言折叠面板组件直观展示： 下面我们一起分析如何实现这个组件 分析 可以把组件拆分成父容器（collapse）和子组件（collapse-item）2个，然后在父组件上使用 v-model 进行双向绑定 子组件折叠有2种方式，第一种是普通展开模式，第二种是accordion（手风琴）模式 对折叠项 ...

前言switch 组件是一个很常用的基础组件，如下图所示： 下面我们来一起开发一个自定义的 switch 组件吧 分析因为 switch 组件是一个开关组件，它的可操作状态就和 checkbox 一样，所以，我们可以基于 <input type="checkbox"> ...

前言前2天和同事聊天的时候，被问到如何利用CSS手绘一个 5角星 图形，简单思考了下，想出了个比较简易的办法，详细分析见下文 分析我们先来观察下5角星，发现它有以下几个特征： 有5个角，对应5个三角形 每个三角形都是等边三角形 每个三角形之间间隔同样的角度，并按圆形排列 结合上述特征，就可以把问 ...

前言开始本文之前，需要先对CSS的3d坐标轴有一定的概念，如下图所示： 分析RotateZ 从上图可知，rotateZ旋转就是普通的rotate 2d 旋转，我们可以把一个图形压缩为一条线(图中蓝色虚线)，然后按给定角度就行旋转，红色虚线和蓝色虚线的夹角就是旋转的角度 注意：rotate 采取就 ...

CSS CSS理解之z-index 深入研究-webkit-overflow-scrolling:touch及ios滚动 CSS clip:rect矩形剪裁功能及一些应用介绍 css弹性盒子——-桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解 EVENT 移动W ...

声明以下的截图文字说明，来源于 <<CSS揭秘>> 文章的片段 前言在日常开发中 border-radius 属性是一个非常常用和简单的属性，但是他有一个鲜为人知的真相:它可以单独指定水平 和垂直半径，只要用一个斜杠(/)分隔这两个值即可 分析为什么叫 border-radi ...

前言要实现一个spin效果，这里有2种实现实现方式： 往 img 或 embed 标签中，传入svg文件（loading效果的svg）地址到 src 特性中，就可以了 如下所示旋转效果（更多资源，查看附录）：            & ...

声明代码借鉴了 keen-ui 和 material-ui 的实现方式 前言在日常项目中，经常会看到点击button或某个元素块时，有水波纹效果，如下图所示： 下面，我们将分析如何实现这个效果 设计常见的波纹点击效果的实现方式是监听元素的 mousedown、 mouseup 事件（pc端）, t ...

前言在日常开发中，button组件是使用频率比较高的组件，原生的HTML button标签只能满足一部分的使用场景，所以需要对button标签进行二次封装，来满足更多的场景。 设计对于一个button组件，我们对它做如下设计： 保留原生HTML button标签的部分特性 （如：type, dis ...