mand-mobile

mand-mobile

A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios

English | 中文

Links

• Home
• Development Guide
• Change Log
• Examples
• Palette
• Mand Mobile Organization

Preview

You can scan the following QR code to access the examples:

Install & Usage

Template for new project

Vue CLI 2

New project can be initialized and integrated with mand-mobile by vue-cli-2 with mand-mobile-template.

vue init mand-mobile/mand-mobile-template my-project

Vue CLI 3

New project can be initialized and integrated with mand-mobile by vue-cli with vue-cli-plugin-mand.

vue create my-project
cd my-project
npm install --save-dev vue-cli-plugin-mand
vue invoke mand

Manually

npm install mand-mobile --save

Import

• Use babel-plugin-import or ts-import-plugin (Recommended)

import { Button } from 'mand-mobile'

• Manually import

import Button from 'mand-mobile/lib/button'

• Totally import

import Vue from 'vue'
import mandMobile from 'mand-mobile'
import 'mand-mobile/lib/mand-mobile.css'

Vue.use(mandMobile)

Usage

Select the components you need to build your webapp. Find more details in Quick Start.

Development

git clone [e-mail]:didi/mand-mobile.git
cd mand-mobile
npm install
npm run dev

Open your browser and visit http://127.0.0.1:4000. Find more details in Development Guide.

Contributing

Welcome to contribute by creating issues or sending pull requests. See Contributing Guide for guidelines.

Community

License

Mand Mobile is licensed under the Apache License 2.0. See the LICENSE file.

Changelog

2.5.1

2019-09-04

• Feature

  • 增加部分全局reset样式
  • 新增组件Skeleton
  • 新增组件TextareaItem
  • 新增组件RadioGroup和RadioBox
  • ActionBar和ResultPage增加按钮配置属性type , plain, round, inactive, loading, icon, iconSvg#544
  • Dialog单例模式增加onShow和onHide
  • InputItem增加属性preview-type用于设置预填展示时类型

  <md-input-item
    type="bankCard" <!-- 正常输入时表单类型 -->
    preview-type="text" <!-- 预填展示时表单类型 -->
    title="银行卡号"
    value="6222 **** **** 1234"  <!-- 带掩码的预填值 -->
  ></md-input-item>
  

• Fix

  • 修复Swiper滑出滚动区域时无法正常翻页问题#540
  • 修改按钮背景色设置属性为background，容器元素为div