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

372 lines
24 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>Descrevendo a Interface do Usuário - 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" class="active"><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">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/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">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/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="descrevendo-a-interface-do-usuário"><a class="header" href="#descrevendo-a-interface-do-usuário">Descrevendo a Interface do Usuário</a></h1>
<p>Dioxus é uma estrutura <em>declarativa</em>. Isso significa que, em vez de dizer ao Dioxus o que fazer (por exemplo, &quot;criar um elemento&quot; ou &quot;definir a cor para vermelho&quot;), simplesmente <em>declaramos</em> como queremos que a interface do usuário se pareça usando o RSX.</p>
<p>Você já viu um exemplo simples ou sintaxe <code>RSX</code> no aplicativo &quot;hello world&quot;:</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>Aqui, usamos a macro <code>rsx!</code> para <em>declarar</em> que queremos um elemento <code>div</code>, contendo o texto <code>&quot;Hello, world!&quot;</code>. Dioxus pega o RSX e constrói uma interface do usuário a partir dele.</p>
<h2 id="recursos-do-rsx"><a class="header" href="#recursos-do-rsx">Recursos do RSX</a></h2>
<p>O RSX é muito semelhante ao HTML, pois descreve elementos com atributos e filhos. Aqui está um elemento <code>div</code> vazio no RSX, bem como o HTML resultante:</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="filhos"><a class="header" href="#filhos">Filhos</a></h3>
<p>Para adicionar filhos a um elemento, coloque-os dentro dos colchetes <code>{}</code>. Eles podem ser outros elementos ou texto. Por exemplo, você pode ter um elemento <code>ol</code> (lista ordenada), contendo 3 elementos <code>li</code> (item da lista), cada um dos quais contém algum texto:</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="fragmentos"><a class="header" href="#fragmentos">Fragmentos</a></h3>
<p>Você também pode &quot;agrupar&quot; elementos envolvendo-os em <code>Fragment {}</code>. Isso não criará nenhum elemento adicional.</p>
<blockquote>
<p>Nota: você também pode renderizar vários elementos no nível superior de <code>rsx!</code> e eles serão agrupados automaticamente – não há necessidade de um <code>Fragment {}</code> explícito lá.</p>
</blockquote>
<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;},
Fragment {
span { &quot;a group&quot; },
span { &quot;of three&quot; },
span { &quot;items&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;
&lt;span&gt;a group&lt;/span&gt;
&lt;span&gt;of three&lt;/span&gt;
&lt;span&gt;items&lt;/span&gt;
</code></pre>
<h3 id="atributos"><a class="header" href="#atributos">Atributos</a></h3>
<p>Os atributos também são especificados dentro dos colchetes <code>{}</code>, usando a sintaxe <code>name: value</code>. Você pode fornecer o valor como um literal no 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;
&gt;Log In&lt;/a
&gt;
</code></pre>
<blockquote>
<p>Nota: Todos os atributos definidos em <code>dioxus-html</code> seguem a convenção de nomenclatura snake_case. Eles transformam seus nomes <code>snake_case</code> em atributos <code>camelCase</code> do HTML.</p>
</blockquote>
<h4 id="atributos-personalizados"><a class="header" href="#atributos-personalizados">Atributos Personalizados</a></h4>
<p>Dioxus tem um conjunto pré-configurado de atributos que você pode usar. O RSX é validado em tempo de compilação para garantir que você não especificou um atributo inválido. Se você quiser substituir esse comportamento por um nome de atributo personalizado, especifique o atributo entre aspas:</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; Rust is cool &lt;/b&gt;
</code></pre>
<h3 id="interpolação"><a class="header" href="#interpolação">Interpolação</a></h3>
<p>Da mesma forma que você pode <a href="https://doc.rust-lang.org/rust-by-example/hello/print/fmt.html">formatar</a> Rust <em>strings</em>, você também pode interpolar no texto RSX. Use <code>{variable}</code> para exibir o valor de uma variável em uma <em>string</em>, ou <code>{variable:?}</code> para usar a representação <code>Debug</code>:</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;&gt;
Coordinates: (42, 0)
&lt;div&gt;ES&lt;/div&gt;
&lt;div&gt;42&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3 id="expressões"><a class="header" href="#expressões">Expressões</a></h3>
<p>Você pode incluir expressões Rust arbitrárias dentro do RSX, mas deve escapá-las entre colchetes <code>[]</code>:</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;DIOXUS&lt;/span&gt;
</code></pre>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../getting_started/mobile.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/mobile.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>