Files
dioxus/docs/nightly/guide/pt-br/roadmap.html
T
2023-06-01 11:09:51 -05:00

390 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js light">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Roteiro - Documentação do Dioxus</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="Introdução ao Dioxus, um framework portátil, de alto desempenho e ergonômico para criar interfaces de usuário multiplataforma em Rust.">
<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">Introdução</a></li><li class="chapter-item expanded "><a href="getting_started/index.html"><strong aria-hidden="true">1.</strong> Introdução Rápida as Plataformas</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><ol class="section"><li class="chapter-item expanded "><a href="getting_started/hot_reload.html"><strong aria-hidden="true">1.2.1.</strong> Hot Reload</a></li></ol></li><li class="chapter-item expanded "><a href="getting_started/ssr.html"><strong aria-hidden="true">1.3.</strong> Renderização por Servidor</a></li><li class="chapter-item expanded "><a href="getting_started/tui.html"><strong aria-hidden="true">1.4.</strong> Interface do Terminal</a></li><li class="chapter-item expanded "><a href="getting_started/mobile.html"><strong aria-hidden="true">1.5.</strong> Móvel</a></li></ol></li><li class="chapter-item expanded "><a href="describing_ui/index.html"><strong aria-hidden="true">2.</strong> Descrevendo a Interface do Usuário</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> Atributos Especiais</a></li><li class="chapter-item expanded "><a href="describing_ui/components.html"><strong aria-hidden="true">2.2.</strong> Componentes</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> Componente Filho</a></li></ol></li><li class="chapter-item expanded "><a href="interactivity/index.html"><strong aria-hidden="true">3.</strong> Interatividade</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="interactivity/event_handlers.html"><strong aria-hidden="true">3.1.</strong> Manipuladores de Eventos</a></li><li class="chapter-item expanded "><a href="interactivity/hooks.html"><strong aria-hidden="true">3.2.</strong> Hooks &amp; Estado de Componentes</a></li><li class="chapter-item expanded "><a href="interactivity/user_input.html"><strong aria-hidden="true">3.3.</strong> Entradas do Usuário</a></li><li class="chapter-item expanded "><a href="interactivity/sharing_state.html"><strong aria-hidden="true">3.4.</strong> Estado Compartilhado</a></li><li class="chapter-item expanded "><a href="interactivity/custom_hooks.html"><strong aria-hidden="true">3.5.</strong> Hooks Personalizados</a></li><li class="chapter-item expanded "><a href="interactivity/dynamic_rendering.html"><strong aria-hidden="true">3.6.</strong> Renderização Dinâmica</a></li><li class="chapter-item expanded "><a href="interactivity/roteador.html"><strong aria-hidden="true">3.7.</strong> Roteamento</a></li></ol></li><li class="chapter-item expanded "><a href="async/index.html"><strong aria-hidden="true">4.</strong> Assincronia</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> Gerando Futures</a></li></ol></li><li class="chapter-item expanded "><a href="best_practices/index.html"><strong aria-hidden="true">5.</strong> Práticas Recomendadas</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> Tratamento de erros</a></li><li class="chapter-item expanded "><a href="best_practices/antipatterns.html"><strong aria-hidden="true">5.2.</strong> Antipadrões</a></li></ol></li><li class="chapter-item expanded "><a href="publishing/index.html"><strong aria-hidden="true">6.</strong> Publicação</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="custom_renderer/index.html"><strong aria-hidden="true">7.</strong> Renderizador Personalizado</a></li><li class="spacer"></li><li class="chapter-item expanded affix "><a href="roadmap.html" class="active">Roteiro</a></li><li class="chapter-item expanded affix "><a href="contributing.html">Contribuindo</a></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/roadmap.html"><button role="menuitem" class="language" id="light">English</button></a></li>
<li role="none"><a href="../pt-br/roadmap.html"><button role="menuitem" class="language" id="light">Português Brasileiro</button></a></li>
</ul>
</div>
<h1 class="menu-title">Documentação do Dioxus</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/roadmap.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="roteiro-e-conjunto-de-recursos"><a class="header" href="#roteiro-e-conjunto-de-recursos">Roteiro e Conjunto de Recursos</a></h1>
<p>Este conjunto de recursos e roteiro podem ajudá-lo a decidir se o que a Dioxus pode fazer hoje funciona para você.</p>
<p>Se um recurso que você precisa não existe ou você deseja contribuir com projetos no roteiro, sinta-se à vontade para se envolver <a href="https://discord.gg/XgGxMSkvUM">juntando-se ao discord</a>.</p>
<p>Em geral, aqui está o status de cada plataforma:</p>
<ul>
<li>
<p><strong>Web</strong>: Dioxus é uma ótima opção para aplicativos da web puros - especialmente para aplicativos CRUD/complexos. No entanto, ele não possui o ecossistema do React, então você pode estar perdendo uma biblioteca de componentes ou algum <em>hook</em> útil.</p>
</li>
<li>
<p><strong>SSR</strong>: Dioxus é uma ótima opção para pré-renderização, hidratação e renderização de HTML em um endpoint da web. Esteja ciente: o <code>VirtualDom</code> não é (atualmente) <code>Send + Sync</code>.</p>
</li>
<li>
<p><strong>Desktop</strong>: você pode criar aplicativos de desktop de janela única muito competentes agora mesmo. No entanto, os aplicativos de várias janelas exigem suporte do núcleo do Dioxus que não estão prontos.</p>
</li>
<li>
<p><strong>Celular</strong>: o suporte móvel é muito recente. Você descobrirá as coisas à medida que avança e não há muitas <code>crates</code> de suporte para periféricos.</p>
</li>
<li>
<p><strong>LiveView</strong>: o suporte ao LiveView é muito recente. Você descobrirá as coisas à medida que avança. Felizmente, nada disso é muito difícil e qualquer trabalho poderá ser enviado <code>upstream</code> no Dioxus.</p>
</li>
</ul>
<h2 id="recursos"><a class="header" href="#recursos">Recursos</a></h2>
<hr />
<table><thead><tr><th>Recurso</th><th>Situação</th><th>Descrição</th></tr></thead><tbody>
<tr><td>Renderização Condicional</td><td>✅</td><td><code>if/then</code> para esconder/mostrar componente</td></tr>
<tr><td>Map, Iterador</td><td>✅</td><td><code>map/filter/reduce</code> para produzir <code>rsx!</code></td></tr>
<tr><td>Componentes Chaveados</td><td>✅</td><td>comparação em <code>diff</code> com chaves</td></tr>
<tr><td>Web</td><td>✅</td><td>renderizador para navegadores Web</td></tr>
<tr><td>Desktop (WebView)</td><td>✅</td><td>renderizador para Desktop</td></tr>
<tr><td>Estado Compartilhado (Context)</td><td>✅</td><td>compartilha estados através de árvores</td></tr>
<tr><td>Hooks</td><td>✅</td><td>células de memoria nos componentes</td></tr>
<tr><td>SSR</td><td>✅</td><td>renderiza diretamente para <code>string</code></td></tr>
<tr><td>Componente Filho</td><td>✅</td><td><code>cx.children()</code> como lista de nós</td></tr>
<tr><td>Componentes Sem Elementos</td><td>✅</td><td>componentes que não renderizam elementos reais na DOM</td></tr>
<tr><td>Fragmentos</td><td>✅</td><td>elementos múltiplos sem uma raiz real</td></tr>
<tr><td>Propriedades Manuais</td><td>✅</td><td>passa manualmente <code>props</code> com a sintaxe de propagação (<code>spread syntax</code>)</td></tr>
<tr><td>Entradas Controladas</td><td>✅</td><td>encapsulamento com estado em sobre entradas</td></tr>
<tr><td>Estilos CSS/Inline</td><td>✅</td><td>sintaxe para grupos de estilo/atributos em linha</td></tr>
<tr><td>Elementos Personalizados</td><td>✅</td><td>define novos elementos primitivos</td></tr>
<tr><td>Suspensão</td><td>✅</td><td>programa futuras renderizações usando <code>future</code>/<code>Promise</code></td></tr>
<tr><td>Tratamento Integrado de Erros</td><td>✅</td><td>trata erros graciosamente com a sintaxe <code>?</code></td></tr>
<tr><td>NodeRef</td><td>✅</td><td>ganha acesso direto aos nós</td></tr>
<tr><td>Re-hidratação</td><td>✅</td><td>pre-renderiza HTML para acelerar a primeira impressão na tela</td></tr>
<tr><td>Renderização Livre de Gargalos</td><td>✅</td><td><code>diffs</code> grandes são segmentados sobre quadros para uma transição suave como seda</td></tr>
<tr><td>Efeitos</td><td>✅</td><td>executa efeitos após um componente ser enviado para a fila de renderização</td></tr>
<tr><td>Portais</td><td>🛠</td><td>renderiza nós fora da árvore tradicional de elementos (DOM)</td></tr>
<tr><td>Agendamento Cooperativo</td><td>🛠</td><td>prioriza eventos com mais importância sobre eventos menos importantes</td></tr>
<tr><td>Componentes de Servidor</td><td>🛠</td><td>componentes híbridos para aplicativos de única página (SPA) e servidores</td></tr>
<tr><td>Divisão de Pacotes</td><td>👀</td><td>carrega o aplicativo assincronamente e eficientemente</td></tr>
<tr><td>Componentes Tardios</td><td>👀</td><td>dinamicamente carrega os novos componentes assim que estiverem prontos enquanto a página carrega</td></tr>
<tr><td>Estado Global de 1ª Classe</td><td>✅</td><td><code>redux/recoil/mobx</code> sobre o <code>context</code></td></tr>
<tr><td>Execução Nativa</td><td>✅</td><td>execução como um binário portátil sem um <code>runtime</code> (Node)</td></tr>
<tr><td>Sub-Árvore de Memoization</td><td>✅</td><td>pula o <code>diffing</code> em sub-árvores de elementos estáticos</td></tr>
<tr><td>Modelos de Alta Eficiência</td><td>🛠</td><td>chamadas <code>rsx!</code> são traduzidas para modelos sobre a <code>DOM</code></td></tr>
<tr><td>Garantia de Correção por Compilador</td><td>✅</td><td>avisa sobre erros em esquemas de modelos inválidos antes do final da compilação</td></tr>
<tr><td>Motor de Heurística</td><td>✅</td><td>rastreia componentes na memória para minimizar alocações futures</td></tr>
<tr><td>Controle Preciso de Reatividade</td><td>👀</td><td>pula o <code>diffing</code> para ter controle preciso das atualizações de tela</td></tr>
</tbody></table>
<ul>
<li>✅ = implementado e funcionando</li>
<li>🛠 = sendo trabalhado ativamente</li>
<li>👀 = ainda não implementado ou sendo trabalhado</li>
</ul>
<h2 id="roteiro"><a class="header" href="#roteiro">Roteiro</a></h2>
<p>Esses recursos estão planejados para o futuro do Dioxus:</p>
<h3 id="essencial"><a class="header" href="#essencial">Essencial</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Liberação do Núcleo Dioxus</li>
<li><input disabled="" type="checkbox" checked=""/>
Atualizar a documentação para incluir mais teoria e ser mais abrangente</li>
<li><input disabled="" type="checkbox"/>
Suporte para modelos HTML para manipulação de DOM ultrarrápida</li>
<li><input disabled="" type="checkbox"/>
Suporte para vários renderizadores para o mesmo <code>virtualdom</code> (subárvores)</li>
<li><input disabled="" type="checkbox"/>
Suporte para <code>ThreadSafe</code> (<code>Send</code> + <code>Sync</code>)</li>
<li><input disabled="" type="checkbox"/>
Suporte para <code>Portals</code></li>
</ul>
<h3 id="ssr"><a class="header" href="#ssr">SSR</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Suporte SSR + Hidratação</li>
<li><input disabled="" type="checkbox"/>
Suporte integrado de suspensão para SSR</li>
</ul>
<h3 id="desktop"><a class="header" href="#desktop">Desktop</a></h3>
<ul>
<li><input disabled="" type="checkbox"/>
Gerenciamento de janela declarativa</li>
<li><input disabled="" type="checkbox"/>
Modelos para construção/agregação</li>
<li><input disabled="" type="checkbox"/>
Renderizador totalmente nativo</li>
<li><input disabled="" type="checkbox"/>
Acesso ao contexto Canvas/WebGL nativamente</li>
</ul>
<h3 id="móvel"><a class="header" href="#móvel">Móvel</a></h3>
<ul>
<li><input disabled="" type="checkbox"/>
Biblioteca padrão móvel
<ul>
<li><input disabled="" type="checkbox"/>
GPS</li>
<li><input disabled="" type="checkbox"/>
Câmera</li>
<li><input disabled="" type="checkbox"/>
Sistema de Arquivo</li>
<li><input disabled="" type="checkbox"/>
Biometria</li>
<li><input disabled="" type="checkbox"/>
Wi-fi</li>
<li><input disabled="" type="checkbox"/>
Bluetooth</li>
<li><input disabled="" type="checkbox"/>
Notificações</li>
<li><input disabled="" type="checkbox"/>
Prancheta (<em>Clipboard</em>)</li>
</ul>
</li>
<li><input disabled="" type="checkbox"/>
Animações</li>
<li><input disabled="" type="checkbox"/>
Renderizador nativo</li>
</ul>
<h3 id="empacotamento-cli"><a class="header" href="#empacotamento-cli">Empacotamento (CLI)</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Tradução de HTML para RSX</li>
<li><input disabled="" type="checkbox" checked=""/>
Servidor de desenvolvimento</li>
<li><input disabled="" type="checkbox" checked=""/>
Recarregamento em tempo-real (<em>hot-reload</em>)</li>
<li><input disabled="" type="checkbox" checked=""/>
Tradução de JSX para RSX</li>
<li><input disabled="" type="checkbox"/>
Substituição de módulos em tempo-real (<em>hot-modules</em>)</li>
<li><input disabled="" type="checkbox"/>
Divisão de código</li>
<li><input disabled="" type="checkbox"/>
Acervo de macros</li>
<li><input disabled="" type="checkbox"/>
<em>Pipeline</em> CSS</li>
<li><input disabled="" type="checkbox"/>
<em>Pipeline</em> de imagens</li>
</ul>
<h3 id="hooks-essenciais"><a class="header" href="#hooks-essenciais">Hooks Essenciais</a></h3>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
Roteador</li>
<li><input disabled="" type="checkbox" checked=""/>
Gerenciamento de estado global</li>
<li><input disabled="" type="checkbox"/>
Redimensionar o observador</li>
</ul>
<h2 id="trabalho-em-progresso"><a class="header" href="#trabalho-em-progresso">Trabalho em Progresso</a></h2>
<h3 id="ferramenta-de-construção"><a class="header" href="#ferramenta-de-construção">Ferramenta de Construção</a></h3>
<p>Atualmente, estamos trabalhando em nossa própria ferramenta de compilação chamada <a href="https://github.com/DioxusLabs/cli">Dioxus CLI</a> que suportará:</p>
<ul>
<li>uma TUI interativa</li>
<li>reconfiguração em tempo real</li>
<li>recarga de CSS em tempo-real</li>
<li>ligação de dados bidirecional entre o navegador e o código-fonte</li>
<li>um interpretador para <code>rsx!</code></li>
<li>capacidade de publicar no github/netlify/vercel</li>
<li>pacote para iOS/Desktop/etc</li>
</ul>
<h3 id="suporte-ao-liveview--componente-do-servidor"><a class="header" href="#suporte-ao-liveview--componente-do-servidor">Suporte ao LiveView / Componente do Servidor</a></h3>
<p>A arquitetura interna do Dioxus foi projetada desde o primeiro dia para suportar o caso de uso <code>LiveView</code>, onde um servidor Web hospeda um aplicativo em execução para cada usuário conectado. A partir de hoje, não há suporte LiveView de primeira classe – você precisará conectar isso sozinho.</p>
<p>Embora não esteja totalmente implementado, a expectativa é que os aplicativos LiveView possam ser um híbrido entre Wasm e renderizado pelo servidor, onde apenas partes de uma página são &quot;ao vivo&quot; e o restante da página é renderizado pelo servidor, gerado estaticamente ou manipulado pelo SPA anfitrião.</p>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="custom_renderer/index.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="contributing.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="custom_renderer/index.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="contributing.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>