面向未来的Web Components UI组件库

lei___ 发布于2019-08-23 18:35 / 1380人阅读

摘要：是一套使用原生规范开发的跨框架组件库。真正意义上实现了样式和功能的组件化。比如有一个点击扩散的水波纹效果，就是采用来实现，只是辅助完成鼠标位置的获取详细可查看源码。组件使用了属性。

xy-ui

xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档

风格参考Ant Design、Metiral Design。

github项目地址

文档

该文档基于docsify动态创建，文中所有组件均为可交互实例。

现集成gitalk评论系统，有相关问题可在下方评论区留言。

特性

跨框架。无论是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特性仍然无效，所以放弃

安装

目前还没有托管npm，可以在github上获取最新文件。

目录如下：

.
└── xy-ui
    ├── components //功能组件
    |   ├── xy-icon.js
    |   └── ...
    └── iconfont //图标库
        └── icon.svg

将components和iconfont文件夹放入项目当中。

依赖

部分组件使用需要依赖其他组件，依赖关系如下

组件	依赖项	描述
xy-button	xy-icon、xy-loading	按钮。组件使用了icon和loading属性。
xy-icon	无	图标。
xy-slider	xy-tips	滑动条。组件使用了showtips属性。
xy-select	xy-button	下拉选择器。组件内部使用xy-button组合而成。
xy-tab	xy-button	标签页。组件导航按钮使用了xy-button。
xy-loading	无	加载。
xy-switch	无	开关。
xy-checkbox	无	多选。
xy-radio	无	单选。
xy-tips	无	提示。
xy-message	xy-icon	全局提示。提示信息图标使用xy-icon。
xy-dialog	xy-icon、xy-button、xy-loading	弹窗提示。提示信息图标使用xy-icon，确认取消按钮使用了xy-button。组件使用了loading属性。
xy-layout	无	布局。
xy-input	xy-icon、xy-button、xy-tips	输入框。组件使用了icon属性，同时有xy-button交互，表单验证使用了xy-tips信息提示。
xy-textarea	同上	多行输入框。同上。

无依赖组件直接引入多带带js即可，有依赖组件需要引入相关js。

如需多带带使用xy-tips组件，仅需引用xy-tips.js。

// .
// └── project
//     ├── components
//     |   └── xy-tips.js
//     └── index.html
import "./components/xy-tips.js";

如需多带带使用xy-input组件，需引用xy-input.js、xy-button.js、xy-icon.js、xy-tips.js。

// └── project
//     ├── components
//     |   ├── xy-input.js
//     |   ├── xy-button.js
//     |   ├── xy-icon.js
//     |   └── xy-tips.js
//     └── index.html
import "./components/xy-input.js";

大部分情况下全部引用即可

引用 html引用


button

现代浏览器支持原生import语法，不过需要注意script的类型type="module"。

react项目引用

import "./components/xy-icon.js";
ReactDOM.render(button, document.body);

关于react中使用Web Components的注意细节可参考https://react.docschina.org/docs/web-components.html

vue项目引用

与原生类似，暂无研究。

使用

使用一个组件有以下几种方式：

html 标签

这是最常用的使用方式（推荐）。

button

document.createElement

也可以通过document.createElement创建元素

const btn = document.createElement("xy-button");
document.body.appenChild(btn);

new 操作符

自定义组件是通过class定义，可以通过new来实例化。

import XyButton from "./components/xy-button.js";
const btn = new XyButton();
document.body.appenChild(btn);

其他

大部分情况下，可以把组件当成普通的html标签，

比如给button添加事件，有以下几种方式

button

btn.onclick = function(){
    alert(5)
}

btn.addEventListener("click",function(){
    alert(5)
})

自定义事件只能通过addEventListener绑定

比如元素的获取，完全符合html规则


    tab1
    tab2
    tab3

const tab3 = document.getElementById("tab3");
tab3.parentNode;//xy-tab

组件的布尔类型的属性也遵从原生规范（添加和移除属性），比如

 
 
button 
button

总之，大部分情况下把它当成普通的html标签（不用关注shadow dom的结构）就好了，以前怎么做现在仍然怎么做，只是新增了方法而已。

更多详细介绍请查看文档，欢迎star~

GPU云服务器云服务器 web-components web前端和ui的区别 ui和web前端的区别 ui组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105497.html

（翻译）Mantra官方文档

摘要：我们通过对我们应用程序的每个部分进行单元测试来实现这一点，同时遵循一个标准。它帮助你单元测试，动作和集成容器。当在组件库中使用库函数时，它应该是纯函数。 Mantra 工作草案-版本0.2.0 简介这是一个Mantra草案规范，一个由Kadira创建的Meteor的应用程序架构。它帮助开发人员构建可维护的，面向未来的Meteor应用程序。版权 The MIT License (M...

denson 2019-08-20 12:26 评论0 收藏0
2018年前端开发回顾

摘要：在整个年，看到发布版增加了许多功能，包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据，是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后，于年发布。前端发展发展迅速,非常的快。本文将回顾2018年一些重要的前端新闻，事件和 JavaScript 趋势。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ showImg(ht...

crelaber 2019-08-23 14:12 评论0 收藏0
精读《现代 js 框架存在的根本原因》

摘要：官方规范估计很难出现现代框架的设计了，因为官方设计中前端三剑客是相互分离的方案，为了解决现阶段前端框架的问题，必须由完全接管，这几乎就是，或者支持语法的，可这与最初网页设计思路是违背的。现代前端框架正在告诉我们新的三剑客虚拟虚拟。 1 引言深入思考为何前端需要框架，以及 web components 是否可以代替前端框架？原文地址，建议先阅读原文，或者阅读概述。 2 概述现在前端...

coordinate35 2019-08-22 17:23 评论0 收藏0
编写chameleon跨端组件的正确姿势(上篇)

摘要：使用语法统一实现跨端组件请关注文章编写跨端组件的正确姿势下篇依靠强大的多态协议，项目中可以轻松使用各端的第三方组件封装自己的跨端组件库。这种做法同时解决了组件命名冲突问题，例如在微信小程序端引用表示调用小程序原生的组件而不是内置的组件。在chameleon项目中我们实现一个跨端组件一般有两种思路：使用第三方组件封装与基于chameleon语法统一实现。本篇是编写chameleon跨端...

h9911 2019-08-23 15:42 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 评论0 收藏0