zmui v0.7.3

zmUI

A Mobile UI Components Library based on Vue.js

Demo

View Demo

Install

npm install zmui --save

import zmUI from 'zmui';
Vue.use(zmUI);
import 'zmui/src/styles/index.scss';

Components

Header

A header component

Example

<zm-header>This is Header</zm-header>

Props

back

Determine if exists a back btn on the left, it can be set to true or a normal string (default undefined), set true to execute history.back() and a string stands for the event name for custom behavior.

<zm-header :back="true">Header</zm-header>

<zm-header back="myback" @myback="mybackHandle">Header</zm-header>

inline

A Boolean value to control the position attribute of the header to fixed (set false, default) or relative (set true).

btn

A object value to determine if exists a text button of the right, and the event name for emitting.

<zm-header :btn="{text: 'Save', emit: 'save'}" @save="saveInfo"></zm-header>

leftBtn

Same to btn, but on the left.

Toast

A toast component

Example

Mount zm-toast on the root vue instance:

<zm-toast></zm-toast>

Invoke $toast().show on any vue instance or Vue itself:

this.$toast().show('This is message');
Vue.$toast().show('This is message');

Arguments

duration

The second argument can configure the display duration, for example 2 seconds:

this.$toast().show('This is message', 2000);

The default duration is 3 seconds (3000ms), You can use constants defined in the component:

• LENGTH_SHORT - 1 second
• LENGTH_NORMAL - 3 seconds
• LENGTH_LONG - 5 seconds

import { Toast } from 'zmui';
this.$toast().show('This is message', Toast.LENGTH_SHORT);

withIcon

The third argument can configure if to display a icon with exclamation mark over the text.

this.$toast().show('This is a toast with icon', 1000, true);

Carousel

A carousel component for images. It works well on both PC (mouse events) and mobile browsers (touch events).

Example

<zm-carousel :list="list" :auto="3000"></zm-carousel>

{
    list: [{
        url: 'http://www.image.domain/image1.png',
        href: 'http://www.example1.com/',
    }, {
        url: 'http://www.image.domain/image2.png',
        href: 'http://www.example2.com/',
    }]
}

Props

list

The image data list. For each item, url for load image, href for navigation address.

If href is not defined, then it will emit an event carousel-click with the current item as the parameter.

auto

The autoplay interval (ms), set 0 (default) for disable autoplay

Loading

A loading icon displayed on the screen center

Example

Mount zm-loading on the root vue instance:

<zm-loading></zm-loading>

Invoke $loading.show or $loading.hide on any vue instance or Vue itself:

this.$loading().show('Loading...');
this.$loading().hide();

Options

You can pass the second parameter to show to set the loading icon be modal or not (Not modal by default).

this.$loading().show('Loading...', true);

NumberKeyboard

Open a numeric keyboard

Example

<zm-number-keyboard @input="onNumberInput" @ok="setNumber">
    <div>Your input: {{ numberInput }}</div>
</zm-number-keyboard>

export default {
    data() {
        return {
            numberInput: '',
            number: '',
        }  
    },
    methods: {
        onNumberInput(number) {
            this.numberInput = number;
        },
        setNumber(number) {
            this.number = number;
        }
    }
}

Events

input

Trigger when keyboard keys clicked, contains the realtime result

ok

Trigger when ok button clicked, contains the final result

SingleSelect

A select component for single choosing.

Example

<zm-single-select ref="jobSelect" :options="jobList" v-model="job"></zm-single-select>

data: {
    jobList: [
        'Junior Engineer', 'Engineer', 
        'Senior Engineer', 'Architect', 
        'Senior Architect', 'CTO'
    ],
    job: ''
}

methods: {
    openJobChoose() {
        this.$refs.jobSelect.open();
    }
}

Options

Not only String, the option type can be an object with keys (a value key and a text key). The name of text key can be configured with text-key props for displaying.

<zm-single-select 
    ref="genderSelect" 
    :options="genderList"
    text-key="text"
></zm-single-select>

data: {
    genderList: [
        { value: 1, text: 'Male' },
        { value: 2, text: 'Female'},
    ],
    gender: null,
}

methods: {
    openGenderChoose() {
        this.$refs.genderSelect.open();
    }
}

The SingleSelect can be used together with Input component. View Input for detail.

MultipleSelect

To be continued.

DistrictSelect

To be continued.

Navigation

To be continued.

Modal

To be continued.

PullDown

To be continued.

ScrollLoading

To be continued.

Input

To be continued.

Progress

To be continued.

Changelog

v0.7.3 (2019-01-24)

• Optimize styles on component Toast

v0.7.2 (2018-11-02)

• Add custom uploading support on component ImageUploader

v0.7.1 (2018-08-24)

• Remove dependencies from component ImageUploader
• Add component Switch

v0.7.0 (2018-08-22)

• Add component ImagePreview
• Add component ImageUploader

v0.6.10 (2018-08-14)

• Add HTML format support on component Modal

v0.6.9 (2018-07-25)

• Add empty title support on component Modal

v0.6.8 (2018-07-24)

• Add rich style options on component Modal

v0.6.7 (2018-06-23)

• Add customized content on component Modal
• Optimize styles on component Input

v0.6.6 (2018-06-23)

• Add option useModalBack to control if using ModalBack feature on some poor supported browsers such as Android DingTalk browser

v0.6.5 (2018-04-18)

• [bugfix] repair undefined error on Carousel

v0.6.4 (2018-04-16)

• Add seamless scrolling feature on Carousel

v0.6.3 (2018-01-20)

• Add component Progress

v0.6.2 (2017-12-26)

• Add component Suggestion

v0.6.1 (2017-12-18)

• Add component Input
• Add v-model binding to SingleSelect

v0.6.0 (2017-12-08)

• Add components PullDown and ScrollLoading

v0.5.6 (2017-12-01)

• Add hardware acceleration on transition elements

v0.5.5 (2017-11-28)

• Add icon option on Toast component

v0.5.4 (2017-11-28)

• Assign extended objects to Vue itself as well as Vue.prototype

v0.5.3 (2017-11-28)

• Optimize the click event triggering of Carousel

v0.5.0 (2017-11-21)

• Add component Navigation and Modal

v0.4.3 (2017-11-20)

• Move vue from dependencies to devDependencies

v0.4.2 (2017-11-20)

• Add Fallback.js for low android versions on css transitions

v0.4.1 (2017-11-13)

• Remove explicit dependency of vue
• Modify the API of Toast and Loading

v0.3.3 (2017-11-09)

• Add component DistrictSelect
• Add back handling on modal-like components

v0.3.0 (2017-11-07)

• Support Theme customized
• Adjust directory structure

v0.2.0 (2017-11-02)

• Add component NumberKeyboard
• Add component SingleSelect and MultipleSelect
• Add demo pages
• Extract transition styles
• Other optimization

v0.1.3 (2017-10-31)

• Add component Loading

v0.1.2 (2017-10-30)

• Add component Slider (later renamed to Carousel)

v0.1.1 (2017-10-29)

• Add component Toast

v0.1.0 (2017-10-29)

• Add component Header