Weex Ui

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

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>

Used together (recommend)

import { WxcComponent1, WxcComponent2 } from "weex-ui"

In order not to pack all the components, you can use babel-plugin-component import specified component.

npm i babel-plugin-component -D

// add a plugins setting to .babelrc
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages"
      }
    ]
  ]
}

Used separately

import WxcComponent1 from "weex-ui/packages/wxc-component1"
import WxcComponent2 from "weex-ui/packages/wxc-component2"

Weex-toolkit

If you use weex-toolkit to develop a Weex project, Please add 'state-0' and 'babel-plugin-component' to .babelrc.

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

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages"
      }
    ]
  ]
}

You can find more examples here. Write once and support iOS / Android / Html5 right now!

Document

Name	Category	Description
wxc-button	Layout	Basic button
wxc-cell	Layout	Form layout element
wxc-ep-slider *	Layout	Cool slider neighbor
wxc-lightbox	Layout	Picture list full screen display
wxc-overlay	Layout	Basic monlayer element
wxc-popup	Layout	Popup box
wxc-result	Layout	General results page
wxc-slide-nav	Layout	Increases view windows
wxc-minibar	Navigator	Top navigation
wxc-tab-page *	Navigator	Single page Tab switching component
wxc-checkbox	Data Entry	Checkbox list
wxc-countdown	Data Entry	Countdown component
wxc-radio	Data Entry	Radio list
wxc-slider-bar	Data Entry	Sliding select data
wxc-stepper	Data Entry	Quantity changer
wxc-searchbar	Data Entry	Search bar component
wxc-grid-select	Data Display	Grid selection component
wxc-indexlist	Data Display	Index list component
wxc-page-calendar	Data Display	Full page calendar
wxc-rich-text	Data Display	Dynamic template
wxc-simple-flow	Data Display	Simple flow chart
wxc-tag	Data Display	Various forms of tag
wxc-dialog	Feedback	Second confirmation window
wxc-loading	Feedback	Content load reminder
wxc-mask	Feedback	Intermediate popup panel
wxc-noticebar	Feedback	Message prompt bar component
wxc-progress	Feedback	Progress bar
wxc-lottery-rain	Game	Cat-cat game

* These rich interaction components are based on expressionBinding feature. Make sure you have imported the module before using 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 it with NPM.
Star it if you like.
If you have any ideas or suggestions to improve Weex Ui, welcome to submit a PR.
Having a problem getting something to work or want to know why we setup something in a certain way? File a GitHub Issue.

License

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

fromIRIS/weex-ui