中文 | English

Build Status npm NPM downloads NPM all downloads CNPM all downloads GitHub last commit GitHub closed issues Package Quality Join the chat at https://gitter.im/alibaba-weex-ui/chat

A rich interactive, lightweight, high performance UI library based on Weex.

• Home Page
• 中文文档
• Use Weex Ui with weex-toolkit

Try it with Fliggy、Taobao、Tmall、Weex Playground or any browsers now!

npm i weex-ui -S

<template>
 <div>
 <wxc-button text="Open Popup"
 @wxcButtonClicked="buttonClicked">
 </wxc-button>
 <wxc-popup width="500"
 pos="left"
 :show="isShow"
 @wxcPopupOverlayClicked="overlayClicked">
 </wxc-popup>
 </div>
</template>
<script>
 import { WxcButton, WxcPopup } from 'weex-ui';
 // or
 // import WxcButton from 'weex-ui/packages/wxc-button';
 // import WxcPopup from 'weex-ui/packages/wxc-popup';
 module.exports = {
 components: { WxcButton, WxcPopup },
 data: () => ({
 isShow: false
 }),
 methods: {
 buttonClicked () {
 this.isShow = true;
 },
 overlayClicked () {
 this.isShow = false;
 }
 }
 };
</script>

In order to not pack all the components, you need to use babel-plugin-component to import the specified component. At the same time, if you haven't installed babel-preset-stage-0, its necessary to install it.

npm i babel-preset-stage-0 babel-plugin-component -D

{
 "presets": ["es2015", "stage-0"],
 "plugins": [
 [
 "component",
 {
 "libraryName": "weex-ui",
 "libDir": "packages",
 "style": false
 }
 ]
 ]
}

• If babel-loader in webpack.config.js has a exclude for node_modules, please turn on for week-ui as exclude: /node_modules(?!(\/|\\).*(weex).*)/.
• In order to get the latest features, please focus on the ChangeLog and often update weex-ui to the latest.
• Many questions can be found from faq and issue list, if you find a new bug, just file a issue.
• More experience in Weex construction can be learned from Weex + Ui - Weex Conf 2018 ,welcome to translate it.

npm i
npm run start

Once it has been compiled, a browser window will be opened automatically. You can switch to developer mode to see the demo. And there will be a QR code that you can use to try the demo on your phone in the console.

• Use Weex Ui in your daily work.

• Star it if you like.

• Join the chat at dingtalk to help solve weex problems.

  Join the chat at dingtalk

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our Contributing Guide before making a pull request.

Thank you to all the people who already contributed to Weex Ui!

• The MIT License
• Please feel free to use and contribute to the development.