These elements include:
-* xref:inline-text-styles.adoc[Emphasized inline text, such as bold, italics, etc.]
+* xref:inline-text-styles.adoc[Inline text emphasis]
* xref:admonition-styles.adoc[Admonitions]
* xref:list-styles.adoc[Lists]
* xref:sidebar-styles.adoc[Sidebars]
-* xref:ui-macro-styles.adoc[Button, Keybinding, and Menu UI Macros]
+* xref:ui-macro-styles.adoc[Button, keybinding, and menu UI macros]
include::_attributes.adoc[]
endif::[]
-== UI macro elements
-
Asciidoctor supports xref:antora:asciidoc:ui-macros.adoc[three UI element representations] out of the box, which are made from corresponding inline UI macros.
* button (btn macro)
The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser.
However, to look proper, they require some additional styling.
-=== Button
+== Button
A xref:antora:asciidoc:ui-macros.adoc#button[button] is meant to represent an on-screen button (`+btn:[Save]+`).
However, it should not appear like an actual button as that could confuse the reader into thinking it's interactive.
btn:[Save]
-=== Keybinding
+== Keybinding
A xref:antora:asciidoc:ui-macros.adoc#keybinding[keybinding] can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`).
Here's the HTML that's generated for these two forms.
kbd:[F11]
kbd:[Ctrl+F]
-=== Menu
+== Menu
A xref:antora:asciidoc:ui-macros.adoc#menu[menu] can be a top-level menu reference (`+menu:File[]+`) or a nested selection (`+menu:File[Save]+`).
Here's the HTML that's generated for these two forms.
This might be rendered as:
-[%hardbreaks]
menu:File[]
+
menu:File[Save]
The default styling applied to a menu reference is usually sufficient.