xy-ui 介绍
xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。风格参考Ant Design、Metiral Design。
特性
跨框架。无论是react、vue还是原生项目均可使用。
组件化。shadow dom真正意义上实现了样式和功能的组件化。
无依赖。纯原生，无需任何预处理器编译。
原则
在实现组件功能时，遵循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特性仍然无效，所以放弃链接: 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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。