Простая, быстрая и производительная библиотека для создания none-block уведомлений для вашего сайта или приложения.
Привет, Хабр!
Прошло много времени с момента написания первой и единственной статьи на Хабре о Notyjs. С 2012 года библиотека расширила свои возможности.
Сегодня она не зависит от jQuery.
import Noty from 'noty'
new Noty({
text: 'Some notification text',
}).show()
// или
new Noty({
text: 'Some notification text',
animation: {
open : 'animated fadeInRight',
close: 'animated fadeOutRight'
}
}).show()
Поддержка из коробки css библиотек animate.css, mojs, bounce.js, velocity и других.
Добавлен дизайн уведомлений.
В версии 3.1 BETA появилась возможность создания Web Push уведомлений и многое другое.
По прежнему имеет 11 мест размещения уведомлений и 5 типов самих уведомлений.
О авторе
Nedim ARABACI Co-founder, CEO WHODIDTHIS.IO
Github: @needim
Опыт использования
Для своего проекта подбирал наиболее простую и интересную реализацию. Тестировал "vue-notifications" и "mini-toastr". Оба не соответствовали ожиданиям.
Продолжил поиски и наткнулся на Notyjs. Надо признаться, это была любовь с первого взгляда.
На проекте был готов дизайн, приятная анимация. Не хватало именно уведомлений на Noty, чтобы создать теплое и отзывчивое восприятие интерфейса.
Vuejs плагин для Notyjs
Кастомизация уведомлений очень простая. А для пользователей Vuejs, предлагаю готовую обертку этой библиотеки Vue-Notice с глобальным доступом из компонентов.
Установка
npm i @marcius-studio/vue-notice
yarn add @marcius-studio/vue-notice
Добавление плагина
import Vue from 'vue'
import VueNotice from '@marcius-studio/vue-notice'
Vue.use(VueNotice)
// ИЛИ переопределить стандартные настройки
Vue.use(VueNotice, {
layout: 'topRight', // position: 'top', 'topLeft', etc. https://ned.im/noty/#/types
theme: 'mint', // deffrents themes https://ned.im/noty/#/themes
timeout: 5000, // default 5s. Set 0 if need no countdown, can be override for each notice
progressBar: true,
})
Подключение стилей
// import base styles
@import "~@marcius-studio/vue-notice/static/main.scss";
// import theme. Change "mint.scss" to another theme if nedded
@import "~@marcius-studio/vue-notice/static/themes/mint.scss";
Использование
this.$notice.success('success notice') // green
this.$notice.error('error notice') // red
this.$notice.warning('warning notice') // yellow
this.$notice.info('info notice') // blue
// при необходимости можно переопределить опции
this.$notice.success('Success notice with overrided options', {
timeout: 5000, // 5s. Установите 0 если нужно отключить обратный отсчет
})
Уверен, кто еще с ней не знаком она во многом придется по вкусу.
Спасибо за внимание.