lighting-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
188 lines (155 loc) • 7.6 kB
Markdown
# Weex Ui
[](https://travis-ci.org/alibaba/weex-ui)
[](https://github.com/alibaba/weex-ui/commits/dev)
[](https://www.npmjs.com/package/weex-ui)
[](https://npmjs.org/package/weex-ui)
[](https://github.com/alibaba/weex-ui/issues?utf8=%E2%9C%93&q=)
[](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>
<lc-button text="Open Popup"
@LcButtonClicked="buttonClicked">
</lc-button>
<lc-popup width="500"
pos="left"
:show="isShow"
@LcPopupOverlayClicked="overlayClicked">
</lc-popup>
</div>
</template>
<script>
import { LcButton, LcPopup } from 'weex-ui';
// or
// import LcButton from 'weex-ui/packages/lc-button';
// import LcPopup from 'weex-ui/packages/lc-popup';
module.exports = {
components: { LcButton, LcPopup },
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
weex update weexpack
npm i babel-preset-stage-0 babel-plugin-component -D
```
```json
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
```
More details can be found in [How to use with weex-toolkit](/docs/with-weex-toolkit.md)
### 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|
|:--|:--|:--|
|[lc-button](packages/lc-button/)|Layout|Basic button|
|[lc-cell](packages/lc-cell/)|Layout|Cell layout element|
|[lc-ep-slider](packages/lc-ep-slider/) * |Layout|Cool slider neighbor|
|[lc-lightbox](packages/lc-lightbox/)|Layout|Picture list full screen display|
|[lc-overlay](packages/lc-overlay/)|Layout|Basic monlayer element|
|[lc-popup](packages/lc-popup/)|Layout|Popup box|
|[lc-result](packages/lc-result/)|Layout|General results page|
|[lc-slide-nav](packages/lc-slide-nav/)|Layout|Increases view windows|
|[lc-minibar](packages/lc-minibar/)|Navigator|Top navigation|
|[lc-tab-bar](packages/lc-tab-bar/)|Navigator|Tab bar switching component|
|[lc-tab-page](packages/lc-tab-page/) * |Navigator|Single page Tab switching component|
|[lc-checkbox](packages/lc-checkbox/)|Data Entry|Checkbox list|
|[lc-countdown](packages/lc-countdown/)|Data Entry|Countdown component|
|[lc-radio](packages/lc-radio/)|Data Entry|Radio list|
|[lc-slider-bar](packages/lc-slider-bar/) * |Data Entry|Sliding select data|
|[lc-stepper](packages/lc-stepper/)|Data Entry|Quantity changer|
|[lc-searchbar](packages/lc-searchbar/)|Data Entry|Search bar component|
|[lc-grid-select](packages/lc-grid-select/)|Data Display|Grid selection component|
|[lc-indexlist](packages/lc-indexlist/)|Data Display|Index list component|
|[lc-page-calendar](packages/lc-page-calendar/)|Data Display|Full page calendar|
|[lc-rich-text](packages/lc-rich-text/)|Data Display|Dynamic template|
|[lc-simple-flow](packages/lc-simple-flow/)|Data Display|Simple flow chart|
|[lc-tag](packages/lc-tag/)|Data Display|Various forms of tag|
|[lc-dialog](packages/lc-dialog/)|Feedback|Second confirmation window|
|[lc-loading](packages/lc-loading/)|Feedback|Content load reminder|
|[lc-mask](packages/lc-mask/)|Feedback|Intermediate popup panel|
|[lc-noticebar](packages/lc-noticebar/)|Feedback|Message prompt bar component|
|[lc-progress](packages/lc-progress/)|Feedback|Progress bar|
|[lc-lottery-rain](packages/lc-lottery-rain/)|Game|Cat-cat game|
|[utils](packages/utils/)|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).
- It's recommended to use the [Octotree extension](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US) for better documentation search experience.
## 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](./CONTRIBUTING.md).
- 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).
- <details>
<summary>Join our chat at dingtalk.</summary>
<img alt="Join the chat at dingtalk" src="https://img.alicdn.com/tfs/TB1DSvMg2DH8KJjy1XcXXcpdXXa-750-850.jpg" width="240"/>
</details>
## License
- The [MIT License](http://opensource.org/licenses/MIT)
- Please feel free to use and contribute to the development.