| Mit Axure 7 wurde die Option Push/Pull Widgets eingeführt. Die Option kann beim Einblenden von Widgets ausgewählt werden (Show Event). Liegen andere Elemente in dem Bereich, der für das eingeblendete Element benötigt wird, schafft sich das eingeblendete Widget den benötigten Platz automatisch und verschiebt alle Elemente nach unten bzw. nach rechts. Ein typischer Anwendungsfall ist eine Akkordeon Navigation. |
- Axure Version: 8.0
- Level: Advanced
- Dauer: 40 min
- Themen: Axure Advanced, Akkordeon, Navigation, Padding, Push/Pull Widgets
|
Preview:
Das Konzept
In einer Akkordeon-Navigation gibt es versteckte Inhalte, die bei einem Klick auf die Überschrift angezeigt werden. Bei erneutem Klick auf die Überschrift wird dieser Inhalt wieder versteckt. Dieses Verhalten kann über die Aktion Show > toggle Visibility und der zusätzlichen Option Push/Pull Widgets leicht realisiert werden. Das Verschieben der Elemente für den benötigten Platz übernimmt dabei Axure.
1 Vorbereitung
In unserem Beispiel benötigst du für das Akkordeon vier Rectangles für die Menüpunkte und vier weitere Rectangles für die Inhalte. Die Rectangles für die Inhalte werden jeweils direkt unterhalb der Menüpunkte platziert. Am Besten benennst du die Elemente als Überschrift 1-4 und Inhalt 1-4.
Platzieren von notwendigen Elementen für ein Akkordeon
2 Inhalte anpassen
Damit der Text einen Abstand zum Rand hat, muss der Style der Rectangles mit den Inhalten angepasst werden. Hierfür muss du zuerst ein Inhalts-Rectangle auswählen oder alle 4 markieren. An der rechten Seite findest du die Widget und Style Konfigurationen. Hier findest du unter dem Punkt Style die Definition des Alignment + Padding. Das Padding bestimmt den inneren Abstand, wobei hier T = Top (Oben), R = Right (Rechts), B = Bottom (Unten) und L = Left (Links) bedeutet. Wir haben den Abstand von 10 Pixeln zu allen Seiten genommen.
Textabstände definieren
Nun solltest du noch die Properties (Eigenschaften) verändern. Hier ist es sinnvoll den Haken bei dem Punkt Auto Fit Height zu setzen, wodurch sich das Element in der Höhe automatisch anpasst. Dadurch muss die Höhe des Rectangles mit dem Inhalt nicht immer neu angepasst werden, sobald der Text zu lang wird.
Höhe automatisch anpassen lassen
Füge nun deine Inhaltstexte hinzu (hier kannst du natürlich auch andere Elemente verwenden, sobald es allerdings mehrere sind, musst du diese in einem Dynamic Panel zusammenfassen).
Inhaltstexte hinzufügen
3 Elemente neu anordnen
Damit das Akkordeon später funktioniert, verstecke als erstes die Rectangles mit den Inhalten.
Contentinhalte verstecken
Gruppiere die zusammengehörigen Überschriften und Inhalte. Dazu wähle zunächst je eine Überschrift mit dem entsprechenden Inhalts-Rectangle aus. Danach benutze entweder die Schnelltastenkombination Strg/cmd
+ G oder drücke die rechte Maustaste und wähle im Menü den Punkt Group.
Gruppieren von Überschrift und Inhalten
Schiebe die gruppierten Elemente 2, 3 und 4 so übereinander, dass ein geschlossenes Akkordeon entsteht.
geschlossenes Akkordeon
4 Interaktion definieren
Setze in jeder Überschrift die Interaktion OnClick. Benutze hier Toggle Visibility, um die entsprechenden Inhalte anzuzeigen, beziehungsweise zu verstecken. Wähle außerdem im Case Editor die zusätzliche Option Push/Pull Widgets aus, um unkompliziert alle unterliegenden Elemente mit zu verschieben.
Toggle Visibility eines Inhaltes mit der Zusatzoption Push/Pull Widgets
