java
/
jMonkeyEngine-wiki
spiegel van https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>UI Macro Styles :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/wiki-ui/ui-macro-styles.html">
    <link rel="prev" href="sidebar-styles.html">
    <meta name="generator" content="Antora 3.0.1">
    <link rel="stylesheet" href="../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="UI Macro Styles">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../_/css/site-extra.css">
<link rel="stylesheet" href="../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="wiki-ui" data-version="master">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="index.html">Wiki UI</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="prerequisites.html">UI Development Prerequisites</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="set-up-project.html">Set up a UI Project</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="build-preview-ui.html">Build and Preview the UI</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="development-workflow.html">UI Development Workflow</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="templates.html">Work with the Handlebars Templates</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="stylesheets.html">Work with the CSS Stylesheets</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="add-fonts.html">Add Fonts</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="style-guide.html">UI Element Styles</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="inline-text-styles.html">Inline Text</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="admonition-styles.html">Admonitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="list-styles.html">Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="sidebar-styles.html">Sidebars</a>
  </li>
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="ui-macro-styles.html">UI Macros</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Wiki UI</span>
    <span class="version">master</span>
  </div>
  <ul class="components">
    <li class="component">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs/3.8/documentation.html">3.8</a>
        </li>
        <li class="version">
          <a href="../docs/3.4/documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../docs/3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../docs/3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-current">
          <a href="index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="index.html">Wiki UI</a></li>
    <li><a href="style-guide.html">UI Element Styles</a></li>
    <li><a href="ui-macro-styles.html">UI Macros</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki-ui/edit/master/docs/modules/ROOT/pages/ui-macro-styles.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">UI Macro Styles</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>Asciidoctor supports <a href="#antora:asciidoc:ui-macros.adoc" class="xref unresolved">three UI element representations</a> out of the box, which are made from corresponding inline UI macros.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>button (btn macro)</p>
</li>
<li>
<p>keybinding (kbd macro)</p>
</li>
<li>
<p>menu (menu macro)</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>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.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="button"><a class="anchor" href="#button"></a>Button</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A <a href="#antora:asciidoc:ui-macros.adoc#button" class="xref unresolved">button</a> is meant to represent an on-screen button (<code>btn:[Save]</code>).
However, it should not appear like an actual button as that could confuse the reader into thinking it&#8217;s interactive.
Therefore, a button is rendered as a bold text by default:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;b class="button"&gt;Save&lt;/b&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here:</p>
</div>
<div class="paragraph">
<p><b class="button">Save</b></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="keybinding"><a class="anchor" href="#keybinding"></a>Keybinding</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A <a href="#antora:asciidoc:ui-macros.adoc#keybinding" class="xref unresolved">keybinding</a> can be a single key (<code>kbd:[F11]</code>) or a sequence of keys (<code>+<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></code>).
Here&#8217;s the HTML that&#8217;s generated for these two forms.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;kbd&gt;F11&lt;/kbd&gt;
&lt;span class="keyseq"&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;F&lt;/kbd&gt;&lt;/span&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>Here&#8217;s how these might appear:</p>
</div>
<div class="paragraph">
<p><kbd>F11</kbd><br>
<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="menu"><a class="anchor" href="#menu"></a>Menu</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A <a href="#antora:asciidoc:ui-macros.adoc#menu" class="xref unresolved">menu</a> can be a top-level menu reference (<code>menu:File[]</code>) or a nested selection (<code>menu:File[Save]</code>).
Here&#8217;s the HTML that&#8217;s generated for these two forms.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;b class="menuref"&gt;File&lt;/b&gt;
&lt;span class="menuseq"&gt;&lt;b class="menu"&gt;File&lt;/b&gt;&amp;#160;&lt;b class="caret"&gt;&amp;#8250;&lt;/b&gt; &lt;b class="menuitem"&gt;Save&lt;/b&gt;&lt;/span&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>This might be rendered as:</p>
</div>
<div class="paragraph">
<p><b class="menuref">File</b></p>
</div>
<div class="paragraph">
<p><span class="menuseq"><b class="menu">File</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Save</b></span></p>
</div>
<div class="paragraph">
<p>The default styling applied to a menu reference is usually sufficient.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="sidebar-styles.html">Sidebars</a></span>
</nav>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../_/js/site.js"></script>
<script async src="../_/js/vendor/highlight.js"></script>
  </body>
</html>