0.7.3 • Published 7 years ago

zmui

Licence

—

Version

0.7.3

Deps

Size

1.3 MB

Vulns

Weekly

Stars

Summary Dependency Versions

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>

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;
        }
    }
}

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

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