Простая, быстрая и производительная библиотека для создания none-block уведомлений для вашего сайта или приложения.
Пару слов о авторе
Nedim ARABACI Co-founder, CEO WHODIDTHIS.IO
Github: @needim
О Noty.js V3
Привет Мир! Прошло много времени с момента написания первой и единственной статьи на Хабре о notyjs. С 2012 года библиотека расширила свои возможности.
Сегодня она не зависит от jQuery, переписана на нативном JS.
import Noty from 'noty';
new Noty({
text: 'Some notification text',
}).show();
Поддержка из коробки css библиотек animate.css, mojs, bounce.js, velocity и других.
new Noty({
text: 'Some notification text',
animation: {
open : 'animated fadeInRight',
close: 'animated fadeOutRight'
}
}).show();Добавлен дизайн уведомлений.
В версии 3.1 BETA появилась возможность создания Web Push уведомлений и многое другое.
По прежнему имеет 11 мест размещения уведомлений и 5 типов самих уведомлений.
Собственный опыт
Для своего проекта я искал наиболее простую и интересную реализацию из «коробки». Первое на что наткнулся, это модуль vue-notifications + mini-toastr. Сколько я его не крутил, не пришелся он мне по душе. Уже после встретил noty.js. Прикрутил к проекту и надо отдать должное, это была любовь с первого взгляда.
На проекте был готов дизайн, приятная анимация, но чего-то не хватало. Лишь когда уведомления начали работать на noty, я понял, какую изюминку искал. Не мог я себе представить, что «какие то там» уведомления создадут теплое и отзывчивое восприятие дизайна.
p.s. Это первая библиотека, дизайн которой я не перестраивал под себя.
Vue.js плагин для noty.js
Кастомизация уведомлений очень простая. А для пользователей vuejs, предлагаю готовую обертку этой библиотеки vue-notice с глобальным доступом из компонентов:
// минимальным опцией для запуска уведомления является текст
this.$notice.info("New version of the app is available!")
// также, легко переопределить стандартные настройки
// они основаны на опциях плагина
this.$notice.info("Hey! Something very important here...", {
timeout: 6000,
layout: 'topLeft'
})
Развернутая документация к плагину, в описании репозитория.
Уверен, что для тех, кто еще с ней не знаком она во многом придется по вкусу.
Спасибо за внимание.
Поделиться с друзьями
Комментарии (10)
Akuma
14.07.2017 10:05Давно уже использую ее на каждом своем проекте. Шикарная штуковина, а с третьей версии еще и визуально все устраивает и не приходится лопатить стили.
Плюс, на ней можно удобно сделать свои confirm() и prompt().
Nelin
14.07.2017 13:21А для пользователей vuejs, предлагаю готовую обертку этой библиотеки vue-notice с глобальным доступом из компонентов
А версия с доступом из vuex не планируется?
Fragster
14.07.2017 14:58А я-то дурак, рисовал на отдельном фиксированном слое бутстрап-контейнер, а в нем бутстрап-алерты. Ну и да, через bootstrap-vue
igordata
А пару слов об авторе? А пользуешься ли ты ей сам?
johndoe0
>А пару слов об авторе?
Добавил в начало статьи.
>А пользуешься ли ты ей сам?
Да, это и стало причиной публикации поста. Noty.js дала моему проекту изюминку, которую я долго не мог найти.
igordata
Ну напиши немного о своем опыте, скриншотиков реальных приляпай, заодно ссылки на свои сайты можно засветить. Статья просто суховатой вышла. Попапчиков всяких много, чем тебя этот цепанул? Я вот например люблю https://tympanus.net/Development/NotificationStyles/bar-slidetop.html
johndoe0
хорошо