A rich interaction, lightweight, high performance UI library based on Weex.
Try it with FliggyใTaobaoใTmallใWeex Playground or any browsers now! ็ฎไฝไธญๆ>>
npm i weex-ui -S
<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>
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"
}
]
]
}
import WxcComponent1 from "weex-ui/packages/wxc-component1"
import WxcComponent2 from "weex-ui/packages/wxc-component2"
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!
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 your app support it.
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.
- 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.
- The MIT License
- Please feel free to use and contribute to the development.