Skip to content

Latest commit

 

History

History
179 lines (153 loc) · 7.93 KB

README_cn.md

File metadata and controls

179 lines (153 loc) · 7.93 KB
Raw

Weex Ui

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

一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库

预览

你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验   English >>

安装

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';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

汇集使用 (推荐)

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

为了不打包所有的组件，你需要使用 babel-plugin-component 来只引入需要的组件打包。

npm i babel-plugin-component -D
// 增加一个plugins的配置到 .babelrc 中
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages"
      }
    ]
  ]
}

分开使用

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

Weex-toolkit

如果你使用weex-toolkit来开发你的Weex项目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'

weex update weexpack
npm i babel-preset-stage-0 babel-plugin-component  -D
{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
         "style": false
      }
    ]
  ]
}

更多详细可见：在 weex-toolkit 创建的项目中使用 Weex Ui和 weex-ui-demo。

更多

  • 如果你的webpack.config.js中 babel-loader 配置有对 node_modules 进行 exclude 处理，需要将 weex-ui 包过滤才可以使用 exclude: /node_modules(?!(\/|\\).*(weex).*)/。
  • 你可以从这里找到更多地例子，一次编写，同时支持iOS / Android / Html5。

文档

组件名称 分类 描述
wxc-button 布局 基础按钮组件
wxc-cell 布局 单元格组件 展示表单、列表
wxc-ep-slider * 布局 表达式绑定效果的 slider
wxc-lightbox 布局 图片全屏预览
wxc-overlay 布局 基础蒙层
wxc-popup 布局 支持上下左右出现的滑板
wxc-result 布局 通用结果页
wxc-slide-nav 布局 导航滑动 增大视窗
wxc-minibar 导航 模拟导航栏
wxc-tab-bar 导航 底部Bar页面切换
wxc-tab-page * 导航 Tab页面切换滑动组件
wxc-checkbox 数据输入 复选列表
wxc-countdown 数据输入 倒计时
wxc-grid-select 数据输入 网格选择
wxc-radio 数据输入 单选列表
wxc-slider-bar * 数据输入 滑动选择数据
wxc-stepper 数据输入 计数器
wxc-searchbar 数据输入 搜索栏
wxc-city 数据展示 通用城市选择
wxc-icon 数据展示 通用 iconFont 汇集
wxc-indexlist 数据展示 索引列表
wxc-page-calendar 数据展示 全屏日历
wxc-rich-text 数据展示 动态模块 富文本
wxc-simple-flow 数据展示 Simple flow chart
wxc-tag 数据展示 多种形式的标签
wxc-dialog 反馈 二次确认弹框
wxc-loading 反馈 加载器
wxc-mask 反馈 中间出现浮层
wxc-noticebar 反馈 信息通知栏
wxc-progress 反馈 进度条
wxc-lottery-rain 游戏 红包雨 抓猫猫游戏
utils 服务 公共函数
  • * 这些富交互体验组件依赖于 Weex expressionBinding 特性，使用前请确定你的App是否支持。
  • 推荐使用 Octotree 扩展获得更好的组件文档查找体验。

调试

npm i
npm run start

一旦它编译完成后，将会自动打开一个浏览器，你可以将浏览器切换到开发者模式，这时候在console中你可以看到一个预览二维码，直接使用你的 Weex App 扫码就可以看到Demo效果。

支持

  • 通过 npm 来安装使用
  • 如果您喜欢这个组件库，可以 star 此项目
  • 如果您有任何想法或建议来改善 Weex Ui，欢迎提交 PR
  • 假如使用过程中碰到了问题或者不明白某个地方为什么要这样处理？ 可以新建一个 issue 来咨询
  • 加入钉钉聊天群 Join the chat at dingtalk

协议

  • 遵循 MIT 协议
  • 请自由地享受和参与开源