Nigerian Prince Meme

    wx-element

    1.0.0 • Public • Published

    wx-element

    wx-element基于原生web Components规范开发的跨框架 UI 组件库。查看文档 github 项目地址

    更新

    特性

    • 跨框架, 无论是vuereactAngular还是原生项目均可使用。
    • 组件化,shadow dom真正意义上实现了样式和功能的组件化。
    • 同原生,一个多元化组件就像使用一个简单的div标签一样。
    • 无依赖,纯原生。无需任何预处理器编译。
    • 无障碍,支持键盘访问

    兼容性

    现代浏览器,包括移动端浏览器,但不支持IE

    IE不支持原生customElements,webcomponentsjs可以实现对IE的兼容,但是还是有很多CSS特性不支持,所有谨慎使用。

    安装

    • npm
    npm i wx-element
    • cdn
    <script type="module">
      import "https://unpkg.com/wx-element";
      import "https://unpkg.com/wx-element@1.1.2"; // 制定版本号
    </script> 
     
    <script type="module" src="https://unpkg.com/wx-element"></script>
    • 直接在github上获取最新文件。

    目录结构如下:

    .
    └──web-components
       ├── components // 功能组件
           ├──scss // 功能组件样式
           |  ├──wx-button.scss
       |   ├── wx-button.js
       |   └── ...
       └── iconfont // 图标库
           └── ...
       ├── docs // 文档

    如果把整个文件放入项目中

    html 引用

    <script type="module">
      import "./node_modules/wx-element/index.js"; //推荐
      //如需单独使用,文档中都是单独使用的情况,推荐全部引用,即第一种方式。
      import "./node_modules/wx-element/components/wx-button.js";
    </script> 
    <wx-button>button</wx-button>

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

    vue 项目引用

    import wxElement from "wx-element";
    Vue.use(wxElement); // 全局使用
    // 独立使用
    import wxButton from "wx-element/components/wx-button";
    <wx-button>button</wx-button>;

    react 项目引用

    import "wx-element"; //推荐
    //如需单独使用
    import "wx-element/components/wx-button.js";
    ReactDOM.render(<wx-button>button</wx-button>, document.body);

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

    License

    MIT

    Keywords

    none

    Install

    npm i wx-element

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    354 kB

    Total Files

    32

    Last publish

    Collaborators

    • huangihua