Standarddialoge

Wegweiserdialog

Der Wegweiserdialog hebt Sackgassen in der Benutzerführung auf, indem er einen Weg mit sinnvollen Aktionen weisst.

Wegweiser


// Ausführliche Liste der button Optionen siehe bei Button
buttonOptions = {
    autofocus: true,
    'on': {
        'click': function() {
            // tue etwas
        }
    }
};

Alvine.Package.UI.Dialog.createPointTheWayDialog('i18n:mytext',
                            'i18n:add', buttonOptions, {
                                'id': 'containerid',
                                'icon': 'fal fa-info-square fa-3x'
                            });

Die Methode createPointTheWayDialog(text, buttonText, buttonOptions, options) kann mit folgendne Optionen aufgerufen werden.

Schlüssel Beschreibung Default Beispiel
id ID des Containers zufällige ID my1425
icon Anzuzeigendes Icon fal fa-info-square fa-3x fal fa-clock

Der Modal-Dialog fokusiert die weitere Bearbeitung auf einen Dialog, den der Benutzer beantworten muss. Der Dialog wird über die Konstruktor-Methode Modal(title, options) definiert.

modal = new Alvine.Package.UI.Dialog.Modal('Titel', {'id': 'myID'});

Der Dialog wird in das DOM eingefügt und entweder über Javascript oder einen Event angezeigt.

Schlüssel Beschreibung Default Beispiel
aria-label-close close
aria-labelledby undefined
class CSS-Klasse des Dialoges modal fade
id ID der Liste zufällige ID myID

Modal-Dialog

Der Modal-Dialog lässt sich über Methoden anpassen. So lässt sich der Titel über die Set-Methoden der Eigenschaften anpassen.

modal.set('title', 'Willkommen!');

Der Inhalt und der Footer müssen über die Methoden Modal.addContent(content) und Modal.addFooter(content) angepasst werden. Über Modal.reset() können die Inhalte zurückgesetzt und der Dialog neu befüllt werden.