noru / Vue Easy Toast
Licence: mit
A Toast widget for Vue 1 & 2
Stars: ✭ 112
Projects that are alternatives of or similar to Vue Easy Toast
V Dialogs
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Stars: ✭ 121 (+8.04%)
Mutual labels: toast, vue2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-16.96%)
Mutual labels: toast, vue2
Quasar Sika Design
quasar-sika-design让世界没有难写的代码,Quasar Sika Design 是一个企业级中后台前端 / 设计解决方案，中后台管理模板，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板 / 业务组件 / 配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
Stars: ✭ 93 (-16.96%)
Mutual labels: vue2
Vue2 Element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 112 (+0%)
Mutual labels: vue2
Desktoptoast
A library for toast notifications from desktop app
Stars: ✭ 105 (-6.25%)
Mutual labels: toast
Android Appmsg
In-layout notifications. Based on Toast notifications and article by Cyril Mottier (http://android.cyrilmottier.com/?p=773).
Stars: ✭ 1,384 (+1135.71%)
Mutual labels: toast
Vue3 Sfc Loader
Vue3 Single File Component loader for Vue2 and Vue3. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.
Stars: ✭ 95 (-15.18%)
Mutual labels: vue2
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (-6.25%)
Mutual labels: vue2
Vue-Easy-Toast
A toast plugin for vue/vue2.
Note: Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x
Issue/PR is welcomed, I'll response as soon as possible.
Usage
install
npm install vue-easy-toast --save
Quickstart
// before start
import Toast from 'vue-easy-toast'
// or a lite version without inline css, then you have to style yourself or manually import 'vue-easy-toast.css'
import Toast from 'vue-easy-toast/dist/vue-easy-toast-lite.min.js'
require('vue-easy-toast/dist/vue-easy-toast.css') // optional
Vue.use(Toast)
// in your code
Vue.toast('Can I have everybody`s attention?')
// or
$vm.$toast('Let me give a toast to you all.')
// or with HTML Tags
$vm.$toast('Hi <strong>Jonh</strong>')
More
toast or $toast takes 2 parameter: (message, [options])
Options
| Parameter | Type | Default | Description |
|---|---|---|---|
| id | string |
easy-toast-default |
Unique identifier globally. Use this to create multiple toasts with different setups. |
| parent | string |
body |
Selector of the container (TODO, not ready yet, position is fixed to the window) |
| className |
string, array
|
Self-defined class names to pass through. There are 3 pre-defined classes: et-info, et-warn,et-alert, to toast with different background color |
|
| horizontalPosition | string |
right |
Position horizontal of toast. There are 3 pre-defined positions: left, right and center
|
| verticalPosition | string |
top |
Position vertical of toast. There are 2 pre-defined positions: top and bottom
|
| duration | number |
5000 | The duration one toast will last, in milliseconds |
| mode | string |
override |
override or queue. If override, the last toast will forcibly flush previous |
| closeable | boolean |
false |
true or false. If true, the toast can be closed manually |
| transition | string |
fade |
Built-in transitions: fade, slide-[up/down/left/right]. See also Transitions
|
Styling
Besides minimum styling, vue-easy-toast try not to be opinionated about the appearance. It is a simply a div(class="et-wrapper") wrapped a span(class="et-content"). Apply your css freely with them or with your own classes passed in as className.
example
Vue.toast('Hi, there!', {
id: 'my-toast',
parent: '#toast-container',
className: ['my-toast', 'toast-warning'],
horizontalPosition: 'right',
verticalPosition: 'top',
duration: 3000,
mode: 'queue',
transition: 'my-transition'
})
TODO
- font-awesome? emoji?
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].