xy-ui

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

风格参考Ant Design、Metiral Design。

github项目地址

更新

• 1.4.0

  • 新增xy-color-picker颜色选择器、xy-color-pane颜色面板

  

  • 优化xy-popover空白处点击处关闭逻辑
  • 修复xy-selecthover层级问题

update

特性

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

兼容性

现代浏览器。

包括移动端，不支持IE。

IE不支持原生customElements，webcomponentsjs可以实现对IE的兼容，不过很多CSS特性仍然无效，所以放弃

安装

方式一：通过npm

npm i xy-ui

方式二：直接在github上获取最新文件。

目录如下：

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

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

引用

设置window.iconUrl

设置图标库的相对路径。

<script>
    window.iconUrl = './node_modules/xy-ui/iconfont/icon.svg';//设置icon.svg的相对路径
</script>

设置window.basePath

设置图标库的绝对路径。

当使用npm创建时，需设置window.basePath，页面加载的路径，默认为根路径/。

<script>
    window.basePath = '/build/';
</script>

以上两种方式选其一。

设置window.iconUrl或者window.basePath是为了保证xy-icon的引用路径，详细可参考xy-icon文档。

html引用

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

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

react项目引用

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

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

vue项目引用

与原生类似，暂无研究。

使用

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

html 标签

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

<xy-button>button</xy-button>

document.createElement

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

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

new 操作符

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

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

其他

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

比如给<xy-button>button</xy-button>添加事件，有以下几种方式

<xy-button onclick="alert(5)">button</xy-button>

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

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

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

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

<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3" id="tab3">tab3</xy-tab-content>
</xy-tab>

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

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

<xy-dialog show></xy-dialog> <!-- 显示 -->
<xy-dialog></xy-dialog> <!-- 隐藏 -->
<xy-button loading>button</xy-button> <!-- 加载中 -->
<xy-button>button</xy-button> <!-- 正常 -->

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