xy-ui 介绍
xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。风格参考Ant Design、Metiral Design。
特性
跨框架。无论是react、vue还是原生项目均可使用。
组件化。shadow dom真正意义上实现了样式和 功能 的组件化。
类原生。 一个 组件就像使用 一个 div 标签 一样。
无依赖。纯原生，无需任何预处理器编译。
无障碍。 支持 键盘 访问。
原则
在实现组件 功能 时，遵循css为主，JavaScript为辅的思路，UI和业务逻辑分离，使得 代码 结构上更加简约。
比如xy-button有 一个 点击扩散的水波纹 效果 ，就是采用css来实现，JavaScript只是辅助完成鼠标位置的 获取
.btn::after {
content: "";
dis play: 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([ dis abled]):active::after {
transform: translate(-50%,-50%) scale(0);
opacity: .3;
transition: 0s;
}
详细可查看源码。大部分组件都是类似的设计。
兼容性
现代浏览器。 包括 移动端， 不支持 IE。IE 不支持 原生customElements，webcomponentsjs可以实现对IE的兼容，不过很多css特性仍然无效，所以放弃 链接 : http://www.fly63.com/nav/2126网站地址 : https://xy-ui.codelabo.cn/docs
GitHub: https://github.com/XboxYan/xy-ui
网站描述: 面向未来的原生 Web Components UI组件库
xy-ui官方网站
官方网站： https://xy-ui.codelabo.cn/docs
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。