UI Macros und Icons

Tastaturkürzel darstellen

Für Software-Dokumentation bietet AsciiDoc spezielle Makros, um Benutzeroberflächen-Elemente einheitlich darzustellen.

Das Keyboard-Macro zeigt Tastaturkürzel an:

Speichern Sie mit kbd:[⌘+S] oder kbd:[Ctrl+S].
Drücken Sie kbd:[Enter], um zu bestätigen.

Ergebnis: Speichern Sie mit ⌘+S oder Ctrl+S. Drücken Sie Enter, um zu bestätigen.

Mehrere Tasten werden mit + verbunden:

kbd:[Ctrl+Alt+Delete]
kbd:[⌘+Shift+P]

Buttons und Menüs

Das Button-Macro stellt Schaltflächen dar:

Klicken Sie auf btn:[OK], um fortzufahren.
Wählen Sie btn:[Abbrechen], um den Vorgang zu beenden.

Ergebnis: Klicken Sie auf OK, um fortzufahren.

Das Menu-Macro zeigt Menüpfade an:

Wählen Sie menu:Datei[Speichern unter...].
Öffnen Sie menu:Bearbeiten[Einstellungen > Allgemein].

Ergebnis: Wählen Sie Datei  Speichern unter…​.

Die Untermenüs werden mit > getrennt innerhalb der eckigen Klammern angegeben.

Icons einfügen

Mit dem Icon-Macro fügen Sie Icons in Ihren Text ein:

icon:heart[] Gefällt mir
icon:check[] Erledigt
icon:warning[] Achtung

Damit Icons angezeigt werden, muss :icons: font im Dokumentkopf stehen.

Icons können auch angepasst werden:

icon:heart[size=2x]           // Doppelte Größe
icon:spinner[spin]            // Animiert
icon:arrow-right[rotate=90]   // Gedreht
adoc Studio verwendet standardmäßig Font Awesome Icons. Mit set= können Sie auch innerhalb eines Dokuments zwischen SF Symbols und Font Awesome wechseln.

Icon Sets: SF Symbols und Font Awesome

Neben Font Awesome können Sie auch Apples SF Symbols nutzen – die Sammlung aller Symbole aus den Apple-Betriebssystemen mit über 6.000 Icons.

Aktivieren Sie SF Symbols mit diesen Attributen im Dokumentkopf:

:icons: font
:icon-set: apple

Fügen Sie Icons mit dem Makro ein. Der adoc Coach schlägt Ihnen während des Tippens passende Icons vor.

Verfügbare Parameter für SF Symbols:

icon:rainbow[palette=multicolor]
icon:arrow.right.circle.fill[palette=hierarchical, role=green]
icon:cloud.drizzle.fill[flip=vertical]
icon:view.2d[rotate=90, role=red]
icon:01.circle[weight=ultralight]
icon:01.circle[weight=black]

Die wichtigsten Parameter im Überblick:

  • flip=horizontal oder flip=vertical – Icon spiegeln

  • palette=monochrome|hierarchical|multicolor – Farbvarianten

  • role=blue – Farbliche Anpassung

  • rotate=90|180|270 – Drehung

  • size=1x|…​|7x oder kurz [2x] – Größe

  • weight=ultralight|…​|black – Strichstärke

  • set=apple|far|fab|fas – Zwischen Icon-Sets wechseln

UI Macros machen Ihre Dokumentation einheitlicher und leichter verständlich – besonders für Anleitungen und Tutorials.