Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apache/incubator-weex-ui
🏄 A rich interaction, lightweight, high performance UI library based on Weex.
https://github.com/apache/incubator-weex-ui
mobile ui-components vue weex
Last synced: about 1 month ago
JSON representation
🏄 A rich interaction, lightweight, high performance UI library based on Weex.
- Host: GitHub
- URL: https://github.com/apache/incubator-weex-ui
- Owner: apache
- License: apache-2.0
- Archived: true
- Created: 2017-09-27T10:41:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-27T12:59:54.000Z (over 3 years ago)
- Last Synced: 2024-09-18T23:14:44.100Z (about 2 months ago)
- Topics: mobile, ui-components, vue, weex
- Language: Vue
- Homepage: https://apache.github.io/incubator-weex-ui/#/
- Size: 5.89 MB
- Stars: 4,763
- Watchers: 184
- Forks: 907
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- Awesome-GitHub-Repo - Weex Ui - 基于 Weex 的 UI 组件库 。[<img src="https://tva1.sinaimg.cn/large/008i3skNly1gxlhtmg11mj305k05k746.jpg" alt="微信" width="18px" height="18px" />](https://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA%3D%3D&chksm=f9a22984ced5a092b79362bb18932e8895ed01dba198513522bf50bec33c1458dd29805bd4da&idx=1&mid=2247498317&scene=21&sn=8d67a6067e8a30d2bc6548c3756621ad#wechat_redirect) (大厂开源 / 阿里开源)
- awesome-made-by-chinese - incubator-weex-ui
README
# Weex Ui
[中文](README_cn.md) | [English](README.md)
[](https://travis-ci.org/apache/incubator-weex-ui)
[](https://www.npmjs.com/package/weex-ui?_blank)
[](https://npmjs.org/package/weex-ui)
[](https://npmjs.org/package/weex-ui)
[](https://npm.taobao.org/package/weex-ui)
[](https://github.com/apache/incubator-weex-ui/commits/dev)
[](https://github.com/apache/incubator-weex-ui/issues?utf8=%E2%9C%93&q=)
[](http://packagequality.com/#?package=weex-ui)
[](https://gitter.im/alibaba-weex-ui/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
> A rich interactive, lightweight, high performance UI library based on [Weex](https://github.com/apache/incubator-weex).
## Docs
* [**Home Page**](https://apache.github.io/incubator-weex-ui/)
* [中文文档](https://apache.github.io/incubator-weex-ui/#/cn/)
* [Use Weex Ui with weex-toolkit](https://apache.github.io/incubator-weex-ui/#/docs/with-weex-toolkit)
## Demo
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, Taobao, Tmall, Weex Playground or any browsers now!
## Installation
```shell
npm i weex-ui -S
```
## Usage
```html
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;
}
}
};
```
### Before use
In order to not pack all the components, you need to use [`babel-plugin-component`](https://www.npmjs.com/package/babel-plugin-component) to import the specified component.
At the same time, if you haven't installed `babel-preset-stage-0`, it's necessary to install it.
```shell
npm i babel-preset-stage-0 babel-plugin-component -D
```
```json
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
```
### More
* If babel-loader in `webpack.config.js` has a exclude for node_modules, please turn on for weex-ui as `exclude: /node_modules(?!(\/|\\).*(weex).*)/`.
* In order to get the latest features, please focus on the [ChangeLog](https://github.com/apache/incubator-weex-ui/releases) and often update `weex-ui` to the latest.
* Many questions can be found in the [faq](https://apache.github.io/incubator-weex-ui/#/docs/faq) and [issue list](https://github.com/apache/incubator-weex-ui/issues?utf8=%E2%9C%93&q=), if you find a new bug, just file an [issue](https://github.com/apache/incubator-weex-ui/issues/new).
* More experience in Weex construction can be learned from [Weex + Ui - Weex Conf 2018](https://apache.github.io/incubator-weex-ui/#/docs/weex-ui-weex-conf-2018), welcome to translate it.
## 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 Weex Ui in your daily work.
* **Star it** if you like.
* Join the chat at DingTalk to help solve weex problems.
## Contribution
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our [Contributing Guide](https://github.com/apache/incubator-weex-ui/blob/master/CONTRIBUTING.md) before making a pull request.
Thank you to all the people who already contributed to Weex Ui!
## License
* The [Apache License](https://apache.org/)
* Please feel free to use and contribute to the development.