mor-mobile

0.6.3 • Public • Published

一款让你感到幸福的 React 组件库

✨✨这是 Mona 系列的 React 实现,服务于移动端 H5 产品。

npm npm

大致介绍

这是一款轻量级 React 组件库,拥有非常强的可扩展性和自定义功能。

你完全可以根据自己的需要自定义主题样式、组件样式,你也可以根据业务需要扩展组件功能。

可以满足你各种姿势,给你提供各种体位。

依赖

安装

NPM

npm i mor-mobile --save

按需加载

  • 使用 babel-plugin-import(推荐用法)

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件 
npm i babel-plugin-import -dev
.babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "mor-mobile",
      "libraryDirectory": "lib",
      "style": true // 加载 less 文件
    }]
  ]
}
  • 手动引入
import DatePicker from 'mor-mobile/lib/modal';  // 加载 JS
import 'mor-mobile/lib/modal/style';         // 加载 LESS

✨✨你也可以为mor-mobile 起一个别名,让代码变的更好看一点

// webpack 添加解析配置
...js
resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
        'mona': path.resolve('./node_modules/mor-mobile')
    }
}
...
.babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "mona",
      "libraryDirectory": "lib",
      "style": true // 加载 less 文件
    }]
  ]
}

开始使用

接着你可以在代码中直接引入 Mor-mobile 组件

import { Row, Col } from 'mona';

联系我

微信:599321378

TODO

  • toast,添加隐藏回调

  • listView添加头部尾部自定义

  • loading修改阴影样式

  • 通用修改动画

  • Row Col 支持一下offset

  • Toast 支持蒙层cancel,默认可点击

  • Toast 支持自定义图片

  • Toast 支持api方法

  • Toast 支持同时提示多个

  • ListView 支持自定义头部和底部

  • DatePicker 支持disable日期

  • DatePicker 支持api方法

Package Sidebar

Install

npm i mor-mobile

Weekly Downloads

4

Version

0.6.3

License

none

Unpacked Size

207 kB

Total Files

74

Last publish

Collaborators

  • yangxi