.toastr

Mit der toastr-Funktion können dem Nutzer dynamisch Informationen in einer kleinen Benachrichtigung am Randbereich der Seite angezeigt werden.

.success(Nachricht, Titel, Optionen)

Es wird eine grüne Benachrichtigungsbox mit der eingegebenen Nachricht sowie optionalem Titel und Optionen angezeigt.

RAGAI.toastr.success('Dies war erfolgreich', 'Erfolg');

.error(Nachricht, Titel, Optionen)

Es wird eine rote Benachrichtigungsbox mit der eingegebenen Nachricht sowie optionalem Titel und Optionen angezeigt.

RAGAI.toastr.error('Es gab einen Fehler', 'Fehler');

.info(Nachricht, Titel, Optionen)

Es wird eine blaue Benachrichtigungsbox mit der eingegebenen Nachricht sowie optionalem Titel und Optionen angezeigt.

RAGAI.toastr.info('Dies ist eine Information', 'Information');

.warning(Nachricht, Titel, Optionen)

Es wird eine gelb-orange Benachrichtigungsbox mit der eingegebenen Nachricht sowie optionalem Titel und Optionen angezeigt.

RAGAI.toastr.warning('Dies ist eine Warnung', 'Warnung');

toastr-Optionen

Jede der unten gennanten Funktionen unterstützt die Übergabe von Optionen als JSON zur Einstellung und Darstellung der Benachrichtigungsbox. Die Code-Beispiele geben hierbei den Standard-Wert dieser Option wieder.

closeButton

Zeigt in der Benachrichtigung ein Schließen-Symbol (x) an, mit dem diese geschlossen werden kann.

{ closeButton: false }

Typ: boolean

timeOut

Zeit in ms, wie lange die Benachrichtigung angezeigt wird.

{ timeOut: 5000 }

Typ: number

extendedTimeOut

Zeit in ms, wie lange die Benachrichtigung erweitert angezeigt werden soll, nachdem der Nutzer über diese mit der Maus schwebte.

{ extendedTimeOut: 1000 }

Typ: number

disableTimeOut

Option zum Deaktivieren beider TimeOut-Optionen (true) oder nur einer der beiden TimeOut-Optionen ('timeOut' | 'extendedTimeOut')

{ disableTimeOut: false }

Typ: boolean | 'timeOut' | 'extendedTimeOut'

easeTime

Zeit in ms, in der die Benachrichtigung per Animation erscheint und verblasst.

{ easeTime: 300 }

Typ: number

enableHtml

Stellt ein, ob der eingegebene Text als HTML interpretiert werden soll.

{ enableHtml: false }

Typ: boolean

newestOnTop

Die neuste Benachrichtigung wird im Vordergrund dargestellt, während ältere und noch nicht verschwundene Benachrichtigungen hinter der neusten Benachrichtigung liegen.

{ newestOnTop: true }

Typ: boolean

progressBar

Darstellung einer Fortschrittsanzeige über die verbliebene Lebensdauer der Benachrichtigung (=> timeOut).

{ progressBar: false }

Typ: boolean

progressAnimation

Animation der Fortschrittsanzeige.

{ progressAnimation: 'decreasing' }

Typ: 'decreasing' | 'increasing'

positionClass

Positionierung der Benachrichtigungsbox auf der Seite.

{ positionClass: 'toast-top-right' }

Typ: 'toast-top-right' | 'toast-top-left' | 'toast-top-full-width' | 'toast-top-center' | 'toast-bottom-right' | 'toast-bottom-left' | 'toast-bottom-full-width' | 'toast-bottom-center'

tapToDismiss

Nutzer muss aktiv die Benachrichtigungsbox anklicken, damit diese verschwindet (Nicht in Kombination mit timeOut).

{ tapToDismiss: true }

Typ: boolean

Beispiel-Option

{
  closeButton: true,
  positionClass: 'toast-top-center',
  timeOut: 3000,
  disableTimeOut: 'extendedTimeOut',
  progressBar: true
}