next-message v0.0.1

Next-Message

A lightweight feedback message appearing at the top of the screen, fading automatically. Has many different options for different situations.

Features

1. No dependence，lightweight，200 lines of source code，Smaller after compression。
2. UI Beautiful，Reference iview UI styles。

Install

1. use unpkg cdn link

<script src="https://unpkg.com/next-message/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/next-message/index.css">

2.use npm or yarn install

$ npm install next-message
$ yarn add next-message

Use

use script，get global variable $message。

use npm install，need import The module

import $message from 'next-message';
import 'next-message/index.css';

use in page

<!-- global configuration -->
$message.config({ top:85, duration: 4})

<!-- types -->
$message.info('this is a info message')
$message.success('this is a success message')
$message.warning('this is a info warning message')
$message.error('this is a info error message')
$message.loading('loading...')

<!-- onClose -->
$message.info('this is message can close', {
    onClose:() => console.log('close'),
    closable: true,
    duration: 6
})

<!-- destroy -->
$message.destroy()

API

Message instance

This component can be used with the following static methods:

• $message.info(config)
• $message.success(config)
• $message.warning(config)
• $message.error(config)
• $message.loading(config)

Parameter config can be string or object. When string, the content will be directly displayed, when object, the detail usage is explained below:

Methods for global configuration and disposal are also provided:

• $message.config(options)
• $message.destroy()

$Message.config({
    top: 50,
    duration: 3
});

License

Licensed under the MIT License.