mand-mobile

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

Links

• Home
• Developer Instruction
• Theme Customization
• Change Log
• Examples

Install & Usage

Install

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 that you need to build your webapp. Find more details in component preview.

<template>
  <div id="app">
    <md-field title="form" class="block">
      <md-input-item
        title="name"
        placeholder="Please input your name."
      ></md-input-item>
      <md-field-item
        title="sex"
        arrow="arrow-right"
        :value="sex"
        @click="isPickerShow = true"
        solid
      ></md-field-item>
      <md-picker
        v-model="isPickerShow"
        :data="pickerData"
        title="sex"
      ></md-picker>
    </md-field>
    <md-agree class="agree">
      Agree to the privacy policy.
    </md-agree>
    <md-action-bar :actions="actionBarData">
      &yen;128.00
    </md-action-bar>
  </div>
</template>

<script>
import {
  Agree,
  ActionBar,
  Field,
  FieldItem,
  InputItem,
  Picker
} from 'mand-mobile'

export default {
  name: 'app',

  components: {
    [Agree.name]: Agree,
    [ActionBar.name]: ActionBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [Picker.name]: Picker
  },

  data () {
    return {
      isPickerShow: false,
      actionBarData: [{
        text: 'confirm'
      }],
      pickerData: [
        [
          { text: 'male' },
          { text: 'female' }
        ]
      ]
    }
  }
}
</script>

Development

git clone [email protected]: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.

License

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