weex-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
175 lines (143 loc) • 6.78 kB
Markdown
# Weex Ui
[](https://www.npmjs.com/package/weex-ui)
[](https://npmjs.org/package/weex-ui)
[](https://gitter.im/alibaba-weex-ui/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
> A rich interaction, lightweight, high performance UI library based on [Weex](https://github.com/apache/incubator-weex).
## Demo
<img src="https://img.alicdn.com/tfs/TB1O2ulhgoQMeJjy0FoXXcShVXa-1282-986.jpg" width=540/>
*Try [it](https://h5.m.taobao.com/trip/weex-ui/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fweex-ui%2Fdemo%2Findex.native-min.js) with [Fliggy](http://www.fliggy.com/mobile/?spm=181.52816.a1z6c.19.1fcc529aNQO84O&ad_id=&am_id=1301048151a679d80b29)、[Taobao](https://mpage.taobao.com/hd/download.html?spm=a21bo.50862.201858.1.5523e29eOKuPPN)、[Tmall](https://pages.tmall.com/wow/portal/act/app-download?spm=875.7931836/B.a2226mz.16&scm=1027.1.1.1)、[Weex Playground](https://weex.apache.org/cn/playground.html) or any browsers now!* [简体中文>>](./README_cn.md)
## Installation
```shell
npm i weex-ui -S
```
## Usage
```html
<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>
```
### Used together (recommend)
```javascript
import { WxcComponent1, WxcComponent2 } from "weex-ui"
```
In order not to pack all the components, you can use [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component) import specified component.
```shell
npm i babel-plugin-component -D
```
```json
// add a plugins setting to .babelrc
{
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
```
### Used separately
```javascript
import WxcComponent1 from "weex-ui/packages/wxc-component1"
import WxcComponent2 from "weex-ui/packages/wxc-component2"
```
### Weex-toolkit
If you use [weex-toolkit](https://github.com/weexteam/weex-toolkit) to develop a Weex project, Please add 'state-0' and 'babel-plugin-component' to .babelrc.
```shell
npm i babel-preset-stage-0 babel-plugin-component -D
```
```json
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
```
### More
- If `webpack.config.js` babel-loader has a exclude for node_modules, Please turn on for week-ui ` exclude: /node_modules(?!\/.*(weex).*)/`.
- You can find more examples [here](https://github.com/alibaba/weex-ui/tree/master/example). Write once and support iOS / Android / Html5 right now!
## Document
|Name|Category|Description|
|:--|:--|:--|
|[wxc-button](./packages/wxc-button/README.md)|Layout|Basic button|
|[wxc-cell](./packages/wxc-cell/README.md)|Layout|Form layout element|
|[wxc-ep-slider](./packages/wxc-ep-slider/README.md) * |Layout|Cool slider neighbor|
|[wxc-lightbox](./packages/wxc-lightbox/README.md)|Layout|Picture list full screen display|
|[wxc-overlay](./packages/wxc-overlay/README.md)|Layout|Basic monlayer element|
|[wxc-popup](./packages/wxc-popup/README.md)|Layout|Popup box|
|[wxc-result](./packages/wxc-result/README.md)|Layout|General results page|
|[wxc-slide-nav](./packages/wxc-slide-nav/README.md)|Layout|Increases view windows|
|[wxc-minibar](./packages/wxc-minibar/README.md)|Navigator|Top navigation|
|[wxc-tab-page](./packages/wxc-tab-page/README.md) * |Navigator|Single page Tab switching component|
|[wxc-checkbox](./packages/wxc-checkbox/README.md)|Data Entry|Checkbox list|
|[wxc-countdown](./packages/wxc-countdown/README.md)|Data Entry|Countdown component|
|[wxc-radio](./packages/wxc-radio/README.md)|Data Entry|Radio list|
|[wxc-slider-bar](./packages/wxc-slider-bar/README.md) * |Data Entry|Sliding select data|
|[wxc-stepper](./packages/wxc-stepper/README.md)|Data Entry|Quantity changer|
|[wxc-searchbar](./packages/wxc-searchbar/README.md)|Data Entry|Search bar component|
|[wxc-grid-select](./packages/wxc-grid-select/README.md)|Data Display|Grid selection component|
|[wxc-indexlist](./packages/wxc-indexlist/README.md)|Data Display|Index list component|
|[wxc-page-calendar](./packages/wxc-page-calendar/README.md)|Data Display|Full page calendar|
|[wxc-rich-text](./packages/wxc-rich-text/README.md)|Data Display|Dynamic template|
|[wxc-simple-flow](./packages/wxc-simple-flow/README.md)|Data Display|Simple flow chart|
|[wxc-tag](./packages/wxc-tag/README.md)|Data Display|Various forms of tag|
|[wxc-dialog](./packages/wxc-dialog/README.md)|Feedback|Second confirmation window|
|[wxc-loading](./packages/wxc-loading/README.md)|Feedback|Content load reminder|
|[wxc-mask](./packages/wxc-mask/README.md)|Feedback|Intermediate popup panel|
|[wxc-noticebar](./packages/wxc-noticebar/README.md)|Feedback|Message prompt bar component|
|[wxc-progress](./packages/wxc-progress/README.md)|Feedback|Progress bar|
|[wxc-lottery-rain](./packages/wxc-lottery-rain/README.md)|Game|Cat-cat game|
|[utils](./packages/packages/utils/README.md)|Service|Common function|
`*` These rich interaction components are based on [expressionBinding](https://github.com/alibaba/weex/issues/1730) feature. Make sure your app [support it](https://github.com/alibaba/weex-ui/issues/6).
## Development
```shell
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.
## Support
- Use it with NPM.
- **Star it** if you like.
- If you have any ideas or suggestions to improve Weex Ui, welcome to submit a PR.
- Having a problem getting something to work or want to know why we setup something in a certain way? [File a GitHub Issue](https://github.com/alibaba/weex-ui/issues/new).
## License
- The [MIT License](http://opensource.org/licenses/MIT)
- Please feel free to use and contribute to the development.