Google Git
Sign in
apache / incubator-weex-ui / 308623294b6c44384e7c909a2566b760a7b91c7c
commit308623294b6c44384e7c909a2566b760a7b91c7c[log] [tgz]
authorTw93 <tw93@qq.com>Fri Nov 15 14:39:32 2019 +0800
committerGitHub <noreply@github.com>Fri Nov 15 14:39:32 2019 +0800
tree6081cfd9d27d0d6f0580f84875d947079341007b
parent08667611dfacac0c188e34e8e259b386b1ca47a7 [diff]
parent18f13c96fd33fb40ecfbd22fcca13de62566800c [diff]
Merge pull request #471 from zhongwang2008/dev

[+] add wxcSliderBarTouchEnd
tree: 6081cfd9d27d0d6f0580f84875d947079341007b
  1. .github/
  2. bin/
  3. docs/
  4. example/
  5. packages/
  6. .babelrc
  7. .editorconfig
  8. .eslintrc
  9. .gitignore
  10. .nojekyll
  11. .npmignore
  12. .travis.yml
  13. CHANGELOG.md
  14. CHANGELOG_cn.md
  15. CODE_OF_CONDUCT.md
  16. CONTRIBUTING.md
  17. CONTRIBUTING_cn.md
  18. index.html
  19. index.js
  20. ISSUE_TEMPLATE.md
  21. LICENSE
  22. package-lock.json
  23. package.json
  24. postcss.config.js
  25. README.md
  26. README_cn.md
  27. webpack.config.js
README.md

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 Apache License
  • Please feel free to use and contribute to the development.