Mit Axure 7 haben Dynamic Panles einige neue Optionen erhalten. U.a. die Treat as Lightbox Option. Mit dieser Option lassen sich sehr schnell Lightboxen mit abgedunkeltem Hintergrund erstellen. Ein typischer Anwendungsfall ist ein Layer, der sich sich über bestimmte Elemente legen soll. In dieser Übung bauen wir als Beispiel einen Registrierungslayer. |
- Axure Version: 8.0
- Level: Beginner
- Dauer: 20 min
- Themen: Axure Basics, Lightbox, Overlay, Registrierung, Treat As Lightbox
|
Preview:
Das Konzept
Bei Klick auf den Registrierungs-Button wird ein verstecktes Dynamic Panel sichtbar gemacht und durch die Treat as Lightbox Option wie eine Lightbox auf die Seite gelegt. Das Panel verschwindet mit Hide Panel wieder im Hintergrund, wenn man den Registrierungs-Button im Formular anklickt. Am Ende erscheint ein Bestätigungstext.
1 Vorbereitung
Zunächst baut man ein kleines Registrierungsfenster mit einem Button. Sowohl der Button als auch der Text sollten benannt werden:

Button: ‚Registrieren-Button‘

Label: ‚Registrierungstext‘
Ziehe ein Dynamic Panel über das gesamte Registrierungsfenster und nennen es ‚Registrierungsformular‘. Füge dem Panel den State ‚Formular‘ hinzu und platziere die Inhalte:

Dynamic Panel: ‚Registrierungsformular‘

Dynamic Panel ‚Registrierungsformular‘ > State ‚Formular‘
Markiere die beiden Passwortfelder und maskiere sie mit Rechtsklick > Input type > Password:

Passwortfelder maskieren
Verlasse den State wieder und verstecke das Panel mit Hidden. Lege ihn anschließend mit Back in den Hintergrund damit der Registrieren-Button klickbar ist.

Dynamic Panel mit Hidden verstecken

Dynamic Panel mit Back in den Hintergrund setzen
2 Interaktion erstellen
Markiere den Registrieren-Button und gebe ihm die OnClick Aktion Show ‚Registrierungsformular‘.
Unter More Options wählt man zusätzlich treat as lightbox und die Background Color aus.

treat as lightbox Option wählen
Der Button auf dem Formular bekommt auch eine Aktion, damit sich die Lightbox wieder schließt.
Vergebe dem Button im State ‚Formular‘ die OnClick-Aktionen Hide Panel:

OnClick > Hide Registrierungsformular
Anschließend wird das Panel mit Send to Back in den Hintergrund gesetzt:

Send Registrierungsformular to Back
Nachdem die Lightbox ausgeblendet ist, soll eine Bestätigung erfolgen. Hierfür verstecken wir mit Hide zunächst den Registrieren-Button und ändern mit Set Text den Registrierungstext:

Set text on Registrierungstext to …
Mit Klick auf fx kann der Text im Edit Text Fenster bearbeitet werden:

Edit Text
Die fertige Interaktion auf dem Registrieren-Button im State ‚Formular‘ sieht wie folgt aus:

Fertige Interaktion auf dem ‚Button: Registrieren‘