wx-element
wx-element
基于原生web Components
规范开发的跨框架 UI 组件库。查看文档
github 项目地址
更新
-
## 1.0.0
- 新增wx-loading组件
特性
- 跨框架, 无论是
vue
、react
、Angular
还是原生项目均可使用。 - 组件化,
shadow dom
真正意义上实现了样式和功能的组件化。 - 同原生,一个多元化组件就像使用一个简单的
div
标签一样。 - 无依赖,纯原生。无需任何预处理器编译。
- 无障碍,支持键盘访问
兼容性
现代浏览器,包括移动端浏览器,但不支持IE
IE
不支持原生customElements
,webcomponentsjs可以实现对IE
的兼容,但是还是有很多CSS
特性不支持,所有谨慎使用。
安装
- npm
npm i wx-element
- cdn
- 直接在
github
上获取最新文件。
目录结构如下:
.└──web-components ├── components // 功能组件 ├──scss // 功能组件样式 | ├──wx-button.scss | ├── wx-button.js | └── ... └── iconfont // 图标库 └── ... ├── docs // 文档
如果把整个文件放入项目中
html 引用
button
现代浏览器支持原生
import
语法,不过需要注意script
的类型type="module"
。
vue 项目引用
;Vue; // 全局使用// 独立使用;<wx-button>button</wx-button>;
react 项目引用
; //推荐//如需单独使用;ReactDOM;
关于
react
中使用Web Components
的注意细节可参考https://react.docschina.org/docs/web-components.html