# start

wc-ui是一套使用原生Web Components规范开发的跨框架UI组件库

github项目地址

# 文档

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

# 特性

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

# 兼容性

现代浏览器。

包括移动端，不支持IE。

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

# 安装

npm i wc-ui

<script type="module">
    import 'https://unpkg.com/wc-ui';

    import 'https://unpkg.com/wc-ui@0.1.3';//指定版本号
</script>

<!--or-->

<script type="module" src="https://unpkg.com/wc-ui"></script>

直接在github上获取最新文件。

目录如下：

.
└── wc-ui
	└── dist // 组件打包目录
	└── docs // 组件库文档
	└── src
    	└──  components //功能组件
    	 	└── icon
    	└── utils // 工具库

将整个文件夹放入项目当中（可选择以上几个目录文件即可，其他文件夹均为文档测试）。

# 使用

# html引用（推荐）

<html lang="en">
<head>
  <script src="https://unpkg.com/wc-ui@0.1.3"></script>
</head>
<body>
  <wc-icon type="add"></wc-icon>
</body>
</html>

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

# react项目引用

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from 'wc-ui/loader/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});

# vue 项目引用

import { applyPolyfills, defineCustomElements } from 'wc-ui/loader';

Vue.config.productionTip = false;

Vue.config.ignoredElements = [/test-\w*/];

applyPolyfills().then(() => {
  defineCustomElements();
});

自定义主题 →