Weex Ui

中文 | English

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

Docs

Demo

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

Installation

npm i weex-ui -S

Usage

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButt>
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

Before use

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, it's 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 nodemodules, please turn on for weex-ui as exclude: /nodemodules(?!(\/|\\).(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 in the faq and issue list, if you find a new bug, just file an issue.
More experience in Weex construction can be learned from Weex + Ui - Weex Conf 2018, welcome to translate it.

Development

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.