lenn
/
dioxus-mirror
mirror of https://github.com/DioxusLabs/dioxus.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js light">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>Describing the UI</title>


        <!-- Custom HTML head -->
        
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff" />

        <link rel="icon" href="../favicon.svg">
        <link rel="shortcut icon" href="../favicon.png">
        <link rel="stylesheet" href="../css/variables.css">
        <link rel="stylesheet" href="../css/general.css">
        <link rel="stylesheet" href="../css/chrome.css">
        <link rel="stylesheet" href="../css/print.css" media="print">

        <!-- Fonts -->
        <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
        <link rel="stylesheet" href="../fonts/fonts.css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../highlight.css">
        <link rel="stylesheet" href="../tomorrow-night.css">
        <link rel="stylesheet" href="../ayu-highlight.css">

        <!-- Custom theme stylesheets -->

        <!-- MathJax -->
        <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    </head>
    <body>
        <!-- Provide site root to javascript -->
        <script type="text/javascript">
            var path_to_root = "../";
            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script type="text/javascript">
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script type="text/javascript">
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
            if (theme === null || theme === undefined) { theme = default_theme; }
            var html = document.querySelector('html');
            html.classList.remove('no-js')
            html.classList.remove('light')
            html.classList.add(theme);
            html.classList.add('js');
        </script>

        <!-- Hide / unhide sidebar before it is displayed -->
        <script type="text/javascript">
            var html = document.querySelector('html');
            var sidebar = 'hidden';
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            }
            html.classList.remove('sidebar-visible');
            html.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="sidebar-scrollbox">
                <ol class="chapter"><li class="chapter-item expanded affix "><a href="../index.html">Introduction</a></li><li class="chapter-item expanded "><a href="../getting_started/index.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../getting_started/desktop.html"><strong aria-hidden="true">1.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../getting_started/web.html"><strong aria-hidden="true">1.2.</strong> Web</a></li><li class="chapter-item expanded "><a href="../getting_started/ssr.html"><strong aria-hidden="true">1.3.</strong> Server-Side Rendering</a></li><li class="chapter-item expanded "><a href="../getting_started/fullstack.html"><strong aria-hidden="true">1.4.</strong> Fullstack</a></li><li class="chapter-item expanded "><a href="../getting_started/liveview.html"><strong aria-hidden="true">1.5.</strong> Liveview</a></li><li class="chapter-item expanded "><a href="../getting_started/tui.html"><strong aria-hidden="true">1.6.</strong> Terminal UI</a></li><li class="chapter-item expanded "><a href="../getting_started/mobile.html"><strong aria-hidden="true">1.7.</strong> Mobile</a></li><li class="chapter-item expanded "><a href="../getting_started/hot_reload.html"><strong aria-hidden="true">1.8.</strong> Hot Reloading</a></li></ol></li><li class="chapter-item expanded "><a href="../describing_ui/index.html" class="active"><strong aria-hidden="true">2.</strong> Describing the UI</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../describing_ui/special_attributes.html"><strong aria-hidden="true">2.1.</strong> Special Attributes</a></li><li class="chapter-item expanded "><a href="../describing_ui/components.html"><strong aria-hidden="true">2.2.</strong> Components</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_props.html"><strong aria-hidden="true">2.3.</strong> Props</a></li><li class="chapter-item expanded "><a href="../describing_ui/component_children.html"><strong aria-hidden="true">2.4.</strong> Component Children</a></li></ol></li><li class="chapter-item expanded "><a href="../interactivity/index.html"><strong aria-hidden="true">3.</strong> Interactivity</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../interactivity/event_handlers.html"><strong aria-hidden="true">3.1.</strong> Event Listeners</a></li><li class="chapter-item expanded "><a href="../interactivity/hooks.html"><strong aria-hidden="true">3.2.</strong> Hooks &amp; Component State</a></li><li class="chapter-item expanded "><a href="../interactivity/user_input.html"><strong aria-hidden="true">3.3.</strong> User Input</a></li><li class="chapter-item expanded "><a href="../interactivity/sharing_state.html"><strong aria-hidden="true">3.4.</strong> Sharing State</a></li><li class="chapter-item expanded "><a href="../interactivity/custom_hooks.html"><strong aria-hidden="true">3.5.</strong> Custom Hooks</a></li><li class="chapter-item expanded "><a href="../interactivity/dynamic_rendering.html"><strong aria-hidden="true">3.6.</strong> Dynamic Rendering</a></li><li class="chapter-item expanded "><a href="../interactivity/router.html"><strong aria-hidden="true">3.7.</strong> Routing</a></li></ol></li><li class="chapter-item expanded "><a href="../async/index.html"><strong aria-hidden="true">4.</strong> Async</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../async/use_future.html"><strong aria-hidden="true">4.1.</strong> UseFuture</a></li><li class="chapter-item expanded "><a href="../async/use_coroutine.html"><strong aria-hidden="true">4.2.</strong> UseCoroutine</a></li><li class="chapter-item expanded "><a href="../async/spawn.html"><strong aria-hidden="true">4.3.</strong> Spawning Futures</a></li></ol></li><li class="chapter-item expanded "><a href="../best_practices/index.html"><strong aria-hidden="true">5.</strong> Best Practices</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../best_practices/error_handling.html"><strong aria-hidden="true">5.1.</strong> Error Handling</a></li><li class="chapter-item expanded "><a href="../best_practices/antipatterns.html"><strong aria-hidden="true">5.2.</strong> Antipatterns</a></li></ol></li><li class="chapter-item expanded "><a href="../publishing/index.html"><strong aria-hidden="true">6.</strong> Publishing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../publishing/desktop.html"><strong aria-hidden="true">6.1.</strong> Desktop</a></li><li class="chapter-item expanded "><a href="../publishing/web.html"><strong aria-hidden="true">6.2.</strong> Web</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../fullstack/index.html"><strong aria-hidden="true">7.</strong> Fullstack</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fullstack/getting_started.html"><strong aria-hidden="true">7.1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../fullstack/server_functions.html"><strong aria-hidden="true">7.2.</strong> Communicating with the Server</a></li><li class="spacer"></li></ol></li><li class="chapter-item expanded "><a href="../custom_renderer/index.html"><strong aria-hidden="true">8.</strong> Custom Renderer</a></li><li class="spacer"></li><li class="chapter-item expanded "><a href="../contributing/index.html"><strong aria-hidden="true">9.</strong> Contributing</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../contributing/project_structure.html"><strong aria-hidden="true">9.1.</strong> Project Structure</a></li><li class="chapter-item expanded "><a href="../contributing/walkthrough_readme.html"><strong aria-hidden="true">9.2.</strong> Walkthrough of Internals</a></li><li class="chapter-item expanded "><a href="../contributing/guiding_principles.html"><strong aria-hidden="true">9.3.</strong> Guiding Principles</a></li><li class="chapter-item expanded "><a href="../contributing/roadmap.html"><strong aria-hidden="true">9.4.</strong> Roadmap</a></li></ol></li></ol>
            </div>
            <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
        </nav>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                                <div id="menu-bar-hover-placeholder"></div>
                <div id="menu-bar" class="menu-bar sticky bordered">
                    <div class="left-buttons">
                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                            <i class="fa fa-bars"></i>
                        </button>
                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                            <i class="fa fa-paint-brush"></i>
                        </button>
                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                            <li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                        </ul>
                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                            <i class="fa fa-search"></i>
                        </button>
                        <button id="language-toggle" class="icon-button" type="button" title="Select language" aria-label="Select language" aria-haspopup="true" aria-expanded="false" aria-controls="language-list">
                            <i class="fa fa-globe"></i>
                        </button>
                        <ul id="language-list" class="language-popup" aria-label="Languages" role="menu">
                            <li role="none"><a href="../../en/describing_ui/index.html"><button role="menuitem" class="language" id="light">English</button></a></li>
                            <li role="none"><a href="../../pt-br/describing_ui/index.html"><button role="menuitem" class="language" id="light">Português Brasileiro</button></a></li>
                        </ul>
                    </div>

                    <h1 class="menu-title"></h1>

                    <div class="right-buttons">
                        <a href="../print.html" title="Print this book" aria-label="Print this book">
                            <i id="print-button" class="fa fa-print"></i>
                        </a>
                        <a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide" title="Git repository" aria-label="Git repository">
                            <i id="git-repository-button" class="fa fa-github"></i>
                        </a>
                        <a href="https://github.com/DioxusLabs/dioxus/edit/master/docs/guide/src/describing_ui/index.md" title="Suggest an edit" aria-label="Suggest an edit">
                            <i id="git-edit-button" class="fa fa-edit"></i>
                        </a>

                    </div>
                </div>

                <div id="search-wrapper" class="hidden">
                    <form id="searchbar-outer" class="searchbar-outer">
                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
                    </form>
                    <div id="searchresults-outer" class="searchresults-outer hidden">
                        <div id="searchresults-header" class="searchresults-header"></div>
                        <ul id="searchresults">
                        </ul>
                    </div>
                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script type="text/javascript">
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <h1 id="describing-the-ui"><a class="header" href="#describing-the-ui">Describing the UI</a></h1>
<p>Dioxus is a <em>declarative</em> framework. This means that instead of telling Dioxus what to do (e.g. to &quot;create an element&quot; or &quot;set the color to red&quot;) we simply <em>declare</em> what we want the UI to look like using RSX.</p>
<p>You have already seen a simple example of RSX syntax in the &quot;hello world&quot; application:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// define a component that renders a div with the text &quot;Hello, world!&quot;
fn App(cx: Scope) -&gt; Element {
    cx.render(rsx! {
        div {
            &quot;Hello, world!&quot;
        }
    })
}
<span class="boring">}
</span></code></pre></pre>
<p>Here, we use the <code>rsx!</code> macro to <em>declare</em> that we want a <code>div</code> element, containing the text <code>&quot;Hello, world!&quot;</code>. Dioxus takes the RSX and constructs a UI from it.</p>
<h2 id="rsx-features"><a class="header" href="#rsx-features">RSX Features</a></h2>
<p>RSX is very similar to HTML in that it describes elements with attributes and children. Here's an empty <code>div</code> element in RSX, as well as the resulting HTML:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!(div {
    // attributes / listeners
    // children
}))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;div&gt;&lt;/div&gt;
</code></pre>
<h3 id="attributes"><a class="header" href="#attributes">Attributes</a></h3>
<p>Attributes (and <a href="../interactivity/index.html">listeners</a>) modify the behavior or appearance of the element they are attached to. They are specified inside the <code>{}</code> brackets, using the <code>name: value</code> syntax. You can provide the value as a literal in the RSX:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!(a {
    href: &quot;https://www.youtube.com/watch?v=dQw4w9WgXcQ&quot;,
    class: &quot;primary_button&quot;,
    color: &quot;red&quot;,
}))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;a href=&quot;https://www.youtube.com/watch?v=dQw4w9WgXcQ&quot; class=&quot;primary_button&quot; autofocus=&quot;true&quot; style=&quot;color: red&quot;&gt;&lt;/a&gt;
</code></pre>
<blockquote>
<p>Note: All attributes defined in <code>dioxus-html</code> follow the snake_case naming convention. They transform their <code>snake_case</code> names to HTML's <code>camelCase</code> attributes.</p>
</blockquote>
<blockquote>
<p>Note: Styles can be used directly outside of the <code>style:</code> attribute. In the above example, <code>color: &quot;red&quot;</code> is turned into <code>style=&quot;color: red&quot;</code>.</p>
</blockquote>
<h4 id="custom-attributes"><a class="header" href="#custom-attributes">Custom Attributes</a></h4>
<p>Dioxus has a pre-configured set of attributes that you can use. RSX is validated at compile time to make sure you didn't specify an invalid attribute. If you want to override this behavior with a custom attribute name, specify the attribute in quotes:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>    cx.render(rsx!(b {
        &quot;customAttribute&quot;: &quot;value&quot;,
    }))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;b customAttribute=&quot;value&quot;&gt;
&lt;/b&gt;
</code></pre>
<h3 id="interpolation"><a class="header" href="#interpolation">Interpolation</a></h3>
<p>Similarly to how you can <a href="https://doc.rust-lang.org/rust-by-example/hello/print/fmt.html">format</a> Rust strings, you can also interpolate in RSX text. Use <code>{variable}</code> to Display the value of a variable in a string, or <code>{variable:?}</code> to use the Debug representation:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>let coordinates = (42, 0);
let country = &quot;es&quot;;
cx.render(rsx!(div {
    class: &quot;country-{country}&quot;,
    &quot;position&quot;: &quot;{coordinates:?}&quot;,
    // arbitrary expressions are allowed,
    // as long as they don't contain `{}`
    div {
        &quot;{country.to_uppercase()}&quot;
    },
    div {
        &quot;{7*6}&quot;
    },
    // {} can be escaped with {{}}
    div {
        &quot;{{}}&quot;
    },
}))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;div class=&quot;country-es&quot; position=&quot;(42, 0)&quot;&gt;
    &lt;div&gt;ES&lt;/div&gt;
    &lt;div&gt;42&lt;/div&gt;
    &lt;div&gt;{}&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="children"><a class="header" href="#children">Children</a></h3>
<p>To add children to an element, put them inside the <code>{}</code> brackets after all attributes and listeners in the element. They can be other elements, text, or <a href="components.html">components</a>. For example, you could have an <code>ol</code> (ordered list) element, containing 3 <code>li</code> (list item) elements, each of which contains some text:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!(ol {
    li {&quot;First Item&quot;}
    li {&quot;Second Item&quot;}
    li {&quot;Third Item&quot;}
}))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;ol&gt;
    &lt;li&gt;First Item&lt;/li&gt;
    &lt;li&gt;Second Item&lt;/li&gt;
    &lt;li&gt;Third Item&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<h3 id="fragments"><a class="header" href="#fragments">Fragments</a></h3>
<p>You can render multiple elements at the top level of <code>rsx!</code> and they will be automatically grouped.</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!(
    p {&quot;First Item&quot;},
    p {&quot;Second Item&quot;},
))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;p&gt;First Item&lt;/p&gt;
&lt;p&gt;Second Item&lt;/p&gt;
</code></pre>
<h3 id="expressions"><a class="header" href="#expressions">Expressions</a></h3>
<p>You can include arbitrary Rust expressions as children within RSX that implements <a href="https://docs.rs/dioxus-core/0.3/dioxus_core/trait.IntoDynNode.html">IntoDynNode</a>. This is useful for displaying data from an <a href="https://doc.rust-lang.org/stable/book/ch13-02-iterators.html#processing-a-series-of-items-with-iterators">iterator</a>:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>let text = &quot;Dioxus&quot;;
cx.render(rsx!(span {
    text.to_uppercase(),
    // create a list of text from 0 to 9
    (0..10).map(|i| rsx!{ i.to_string() })
}))
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;span&gt;DIOXUS0123456789&lt;/span&gt;
</code></pre>
<h3 id="loops"><a class="header" href="#loops">Loops</a></h3>
<p>In addition to iterators you can also use for loops directly within RSX:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!{
    // use a for loop where the body itself is RSX
    div {
        // create a list of text from 0 to 9
        for i in 0..3 {
            // NOTE: the body of the loop is RSX not a rust statement
            div {
                &quot;{i}&quot;
            }
        }
    }
    // iterator equivalent
    div {
        (0..3).map(|i| rsx!{ div { &quot;{i}&quot; } })
    }
})
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;div&gt;0&lt;/div&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;0&lt;/div&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
</code></pre>
<h3 id="if-statements"><a class="header" href="#if-statements">If statements</a></h3>
<p>You can also use if statements without an else branch within RSX:</p>
<pre><pre class="playground"><code class="language-rust edition2018">
<span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>cx.render(rsx!{
    // use if statements without an else
    if true {
        rsx!(div { &quot;true&quot; })
    }
})
<span class="boring">}
</span></code></pre></pre>
<pre><code class="language-html">&lt;div&gt;true&lt;/div&gt;
</code></pre>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                            <a rel="prev" href="../getting_started/hot_reload.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>

                            <a rel="next" href="../describing_ui/special_attributes.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                    <a rel="prev" href="../getting_started/hot_reload.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>

                    <a rel="next" href="../describing_ui/special_attributes.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
            </nav>

        </div>


        <script type="text/javascript">
            window.playground_line_numbers = true;
        </script>

        <script type="text/javascript">
            window.playground_copyable = true;
        </script>

        <script src="../ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="../editor.js" type="text/javascript" charset="utf-8"></script>
        <script src="../mode-rust.js" type="text/javascript" charset="utf-8"></script>
        <script src="../theme-dawn.js" type="text/javascript" charset="utf-8"></script>
        <script src="../theme-tomorrow_night.js" type="text/javascript" charset="utf-8"></script>

        <script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../searcher.js" type="text/javascript" charset="utf-8"></script>

        <script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
        <script src="../book.js" type="text/javascript" charset="utf-8"></script>

        <!-- Custom JS scripts -->


    </body>
</html>