xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。风格参考Ant Design、Metiral Design。
特性
- 跨框架。无论是react、vue还是原生项目均可使用。
- 组件化。shadow dom真正意义上实现了样式和功能的组件化。
- 类原生。一个组件就像使用一个div标签一样。
- 无依赖。纯原生，无需任何预处理器编译。
- 无障碍。支持键盘访问。
原则
在实现组件功能时，遵循css为主，JavaScript为辅的思路，UI和业务逻辑分离，使得代码结构上更加简约。
比如xy-button有一个点击扩散的水波纹效果，就是采用CSS来实现，JavaScript只是辅助完成鼠标位置的获取
.btn::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: var(--x,0);
top: var(--y,0);
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: translate(-50%,-50%) scale(10);
opacity: 0;
transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
transform: translate(-50%,-50%) scale(0);
opacity: .3;
transition: 0s;
}
详细可查看源码。大部分组件都是类似的设计。
兼容性
现代浏览器。
包括移动端，不支持IE。IE不支持原生customElements，webcomponentsjs可以实现对IE的兼容，不过很多CSS特性仍然无效，所以放弃
链接: https://fly63.com/nav/2126
