weex-ui-test

    0.6.13 • Public • Published

    Weex Ui

    中文 | English

    Build Status npm NPM downloads NPM all downloads CNPM all downloads GitHub last commit GitHub closed issues Package Quality Join the chat at https://gitter.im/alibaba-weex-ui/chat

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

    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, its 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
                }
            ]
        ]
    }

    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

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

    Install

    npm i weex-ui-test

    DownloadsWeekly Downloads

    1

    Version

    0.6.13

    License

    MIT

    Unpacked Size

    3.76 MB

    Total Files

    227

    Last publish

    Collaborators

    • aoping