In Axure gibt es zwar Checkboxen und Radiobuttons in der Default-Library, allerdings lassen sich diese nur sehr eingeschränkt stylen.
Daher ist es oft sinnvoll, Checkboxen oder Radiobuttons einfach selbst zu bauen. |
- Axure Version: 8.0
- Level: Basic, Beginner
- Dauer: 30 min
- Themen: Axure Basics, Formular, Checkbox, Radiobutton
|
Preview:
1 Benötigte Elemente einfügen
Um eine Checkbox selbst zu erstellen, wird zunächst eine normale Box benötigt. Ziehe diese aus der Default Library in die Arbeitsfläche. Das Aussehen der Box lässt sich je nach Bedarf anpassen – Größe, Farbigkeit, Liniendicke und -art, Abrundung der Ecken usw. – fast alles kann verändert werden.
Im nächsten Schritt wird das Element benötigt, dass bei einer aktivierten Checkbox zu sehen ist. Gut eignet sich dafür zum Beispiel das Check Symbol aus der Icons Library. Das gewünschte Icon kannst du wieder in die Arbeitsfläche ziehen und dort auf die Größe und Farbe der Checkbox anpassen. Falls neben der Checkbox ein Text stehen soll, kannst du auch diesen eingefügen und in das gewünschte Layout bringen.
Box, Icon und Text wurden eingefügt und gestylt.
2 Elemente arrangieren
Nun können die drei Elemente so arrangiert werden, wie sie später bei der selektierten Checkbox aussehen sollen. Das Icon wird dabei an die entsprechende Position und dann vor die Box gesetzt.
Um das Icon bei aktivierter Checkbox sichtbar zu machen, solltest du es auswählen und dann rechts im Reiter Properties unter Interaction Styles auf Selected klicken. Dort kannst du die Opacity, also die Deckkraft, auf 100% einstellen.
Anschliessend kannst du das Icon unsichtbar machen. Dafür solltest du das Icon auswählen und oben rechts den Reiter Style anklicken. Hier kannst du die Opacity auf 0% setzen. Auf diese Weise ist das Icon zunächst nicht sichtbar.
Die drei Elemente wurden wie gewünscht arrangiert und gruppiert. Das Icon ist nicht mehr sichtbar.
3 Interaktion einfügen
Gruppiere die Box mit dem Icon und dem Text, damit den Elementen gemeinsam eine Interaktion zugewiesen werden kann. Gehe dazu nun auf das Event OnClick.
Wähle dort unter Set Selected/Checked die Option This Widget aus und setze den value auf toogle. Nun ist das Icon sichtbar wenn man die Checkbox anklickt. Mit einem weiteren Click kann die Checkbox wieder deaktiviert werden.
Übrigens: soll die Checkbox bereits aktiviert sein, wenn die Seite geladen wird, kannst du unter Properties einfach Selected aktivieren.
Die drei Elemente wurden wie gewünscht arrangiert und gruppiert. Das Icon ist nicht mehr sichtbar.
4 Checkboxen als Radiobuttons
Radiobuttons können wie Checkboxen selbst angelegt und gestaltet werden (vgl. Punkt 1 bis 3) – die Box wird dann einfach durch eine Elipse ersetzt und ein passendes Icon für den aktivierten Zustand, beispielsweise ein kleinerer gefüllter Kreis, ausgewählt.
Allerdings sagt das Interaktionsverhalten von Radiobuttons aus, dass der Nutzer nur eine von mehreren Optionen auswählen kann. Dafür gibt es in Axure die Funktion Selection Group.
Um sie zu nutzten, wähle einen selbst angelegten Radiobutton. Rechts unter dem Reiter Properties findest du nach etwas scrollen Selection Group. Hier kann ein Name für die Gruppe aller Radiobuttons eingegeben werden. Danach kannst du die weiteren Radiobuttons unter Selection Group dieser Gruppe zuordnen.
Als weitere Unterscheidung zu einer Checkbox kann eine Auswahl nicht wieder deaktiviert werden. Um dies zu erreichen, setze das Icon nicht, wie in Punkt 3 beschrieben, value toogle, sondern wähle value true. So kann der Radiobutton nicht wieder deaktiviert werden, es sei denn man aktiviert einen anderen Radiobutton aus der Gruppe.
Gruppe angelegt.
Oft soll einer der Radiobuttons bereits vorausgewählt sein, wenn die Seite geladen wird. Dazu kannst du, analog zur Ceckbox (vgl. Punkt 3), beim entsprechenden Radiobutton unter Properties einfach Selected aktivieren.
Für die Option A wurde „Selected“ ausgwehält, damit diese Option vorausgwählt ist.
