xy-ui

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: "";

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

小编说

以上是编程之家为你收集整理的xy-ui全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。