alibaba/weex-ui

Name: weex-ui

Owner: Alibaba

Description: ? A rich interaction, lightweight, high performance UI library based on Weex.

Created: 2017-09-27 10:41:36.0

Updated: 2018-05-24 16:42:18.0

Pushed: 2018-05-24 10:57:40.0

Homepage: https://alibaba.github.io/weex-ui

Size: 5403

Language: Vue

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Weex Ui

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

Docs

• Home Page
• ????
• Use Weex Ui with weex-toolkit

Demo

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

Installation

i weex-ui -S

Usage

plate>
iv>
<wxc-button text="Open Popup"
            @wxcButtonClicked="buttonClicked">
</wxc-button>
<wxc-popup width="500"
           pos="left"
           :show="isShow"
           @wxcPopupOverlayClicked="overlayClicked">
</wxc-popup>
div>
mplate>

ipt>
port { WxcButton, WxcPopup } from 'weex-ui';
 or
 import WxcButton from 'weex-ui/packages/wxc-button';
 import WxcPopup from 'weex-ui/packages/wxc-popup';
dule.exports = {
components: { WxcButton, WxcPopup },
data: () => ({
  isShow: false
}),
methods: {
  buttonClicked () {
    this.isShow = true;
  },
  overlayClicked () {
    this.isShow = false;
  }
}

ript>

Before use

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

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

son

"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 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.

Development

i
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 before making a pull request.

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

License

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