mand-mobile

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'
import 'mand-mobile/lib/button/style'

• 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>