2016-03-14 2 views
0

Эти небольшие панели уведомлений, которые появляются в течение нескольких секунд, даже когда браузер находится за другим окном. Слак делает это.Каков наилучший способ сделать всплывающие предупреждения браузера?

Есть ли там сторонние директивы или библиотеки jquery?

ответ

2

То, что вы ищете, называется уведомлением о тосте. Найдите «тост» на JQuery Plugin Registry.

+0

Хотя эта ссылка может ответить на этот вопрос, то лучше включать основные части ответа здесь и укажите ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. - [Из обзора] (/ review/low-quality-posts/11619061) – maxhb

+0

@maxhb Этот ответ в порядке, как есть. Было бы невозможно включить «существенные» части связанного с контентом. Вместо того, чтобы удалять этот ответ, сам вопрос должен быть закрыт. –

+0

Посмотрите, как написан ответ @micronyks. Предоставьте простой пример, и все в порядке. – maxhb

1

Этот небольшой панели уведомлений называются toasts.You пометили вопрос под angular2 поэтому предлагаю вам следующие два пакета:
https://www.npmjs.com/package/ng2-toastr
https://www.npmjs.com/package/angular2-toaster

+0

первый не работает, у вас есть какая-то рабочая демонстрация того же самого? throws error 'system не определен' –

+0

@PardeepJain Проверьте приведенный ниже пример с примерами micronyks –

2

Посмотрите Toastr библиотека example with Angular2

app.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <button (click)="displayToastr()">Display Toastr</button> 
    ` 
}) 
export class AppComponent { 
    displayToastr() { 
    toastr.info('I am here for few seconds'); 
    } 
} 

Это, как я использовал Toastrwith Angular1 (had made it for angular1 with directives)

+0

отличная работа +1, для этого нам просто нужно добавить файл' src/toastr.d.ts'? или что-то другое ? –

+0

Извините за поздний ответ. Вы проверили index.html? просто добавьте 'toastr.js' и его css. для этого нет необходимости печатать. Доступна печать. – micronyks

+0

эй @micronyks, когда я пишу этот код 'toastr.info ('xyz');' в моем .ts файле он показывает предупреждение с красным подчеркиванием 'не может найти имя тостер. any' как удалить это? Я могу удалить это, объявив 'declare var toastr: any;', но это неверно, я думаю, что это не так? –