Ir para o conteúdo
Menu
Idioma, atualmente Português
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

sistema de design do rastrillo

Uma visão geral de tudo o que o sistema de design oferece. Tema: signal. Idioma: Português.

Formulário

Todos os controlos, nos estados em que um formulário a sério os põe. Cada um fica dentro de um rst-box com espaçamento, porque é essa a regra que estes parciais assumem.

Elementos de interface já feitos e coerentes entre si, renderizados no servidor.

O vocabulário do próprio framework chama-lhes partials: ui.Templates() devolve partials e docs/site/templates.md documenta-os com esse nome. A palavra desta página mudou; a do código não.

As ligações aqui não estão ativas

Ligações inativas; o código do exemplo é fornecido.

Cada exemplo abaixo fica na sua própria moldura.

O conteúdo de exemplo está em inglês. Os invólucros de exemplo estão traduzidos.

field

Etiqueta, campo, dica opcional, ajuda e erro. O controlo geral do tipo texto, com um ID explícito.

Simples

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_bare">Title</label>
<input rst-input type="text" id="f_bare" name="f_bare">
</div></form></section>

Com uma dica

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_hint">Slug <span rst-field-hint>(lowercase, no spaces)</span></label>
<input rst-input type="text" id="f_hint" name="f_hint">
</div></form></section>

Com ajuda por baixo do controlo

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_help">Email</label>
<input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
<p rst-field-help id="f_help-help">We only use this to send you replies.</p>
</div></form></section>

Obrigatório

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_required">Full name</label>
<input rst-input type="text" id="f_required" name="f_required" required>
</div></form></section>

Com um erro

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_error">Email</label>
<input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
<p rst-field-error id="f_error-error" role="alert">That does not look like an email address.</p>
</div></form></section>

Curto

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_short">Postcode</label>
<input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div></form></section>

O campo principal

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_primary">Title</label>
<input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Quarterly board meeting">
</div></form></section>

field-text

Um campo de texto com etiqueta; os ids derivam de Name. O asterisco do marcador de obrigatório é aria-hidden: o sinal programático é o atributo required do campo.

Simples

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_bare">Title</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div></form></section>

Com uma dica

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_hint">Headline</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Shown in the list.</small>
</div></form></section>

Obrigatório

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_required">Display name <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div></form></section>

Com um erro

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_error">Title</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Release notes" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">A post with that title already exists.</small>
</div></form></section>

O campo principal

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_primary">What is it?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Quarterly board meeting">
</div></form></section>

Adiciona Primary ao campo principal do formulário, por exemplo um título ou um nome, para obteres um campo mais destacado.

field-textarea

O invólucro do field-text à volta de um textarea.

Simples

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_bare">Notes</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div></form></section>

Com uma dica

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_hint">Bio</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Shown on your profile.</small>
</div></form></section>

Com um erro

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_error">Summary</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">A summary needs at least twenty characters.</small>
</div></form></section>

Obrigatório

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_required">Reason for refund <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div></form></section>

field-select

O invólucro do field à volta de um select nativo. A partir de dez opções, o select ativa a caixa com filtro do select.js; o que o formulário envia continua a ser o select nativo.

Três opções: um select nativo

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_few">Role</label>
<select rst-input id="sel_few" name="sel_few"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
</div></form></section>

Doze opções: a caixa combinada com filtro

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_many">City</label>
<select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="Escreva para filtrar" data-rst-select-results="{n} resultados" data-rst-select-result-one="1 resultado" aria-describedby="sel_many-help"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
<p rst-field-help id="sel_many-help">Start typing to filter.</p>
</div></form></section>

A partir de dez opções, o parcial ativa o select.js. Abaixo de dez, não: procurar entre um punhado de itens é mobília, não ajuda.

Doze opções, Plain — a melhoria recusada

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_plain">City</label>
<select rst-input id="sel_plain" name="sel_plain"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
</div></form></section>

Obrigatório, com um erro

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_error">Role</label>
<select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
<p rst-field-error id="sel_error-error" role="alert">Pick a role for this person.</p>
</div></form></section>

Escrito à mão, com optgroups

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_grouped">Region</label>
<select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="Escreva para filtrar" data-rst-select-results="{n} resultados" data-rst-select-result-one="1 resultado">
<optgroup label="Europe"><option value="dublin" selected>Dublin</option><option value="lisbon">Lisbon</option><option value="warsaw">Warsaw</option></optgroup>
<optgroup label="Americas"><option value="montreal">Montréal</option><option value="lima">Lima</option><option value="austin">Austin</option></optgroup>
<optgroup label="Asia"><option value="osaka">Osaka</option><option value="hanoi">Hanoi</option><option value="dhaka">Dhaka</option></optgroup>
<optgroup label="Africa"><option value="accra">Accra</option><option value="nairobi">Nairobi</option><option value="tunis">Tunis</option></optgroup>
</select>
</div></form></section>

Aqui o Options é uma lista plana, por isso as opções agrupadas são marcação que a aplicação escreve. O select.js desenha os grupos em vez de os deitar fora; um select escrito à mão também pode recusar a melhoria por completo com data-rst-select="false".

field-check

O único mecanismo de comutação: uma caixa de verificação a sério com aspeto de interruptor, sem perder teclado nem leitor de ecrã.

Ligado

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_on" checked><span rst-switch-track aria-hidden="true"></span> Email me about replies</label></form></section>

Desligado

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_off"><span rst-switch-track aria-hidden="true"></span> Email me about mentions</label></form></section>

Desativado

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_disabled" disabled><span rst-switch-track aria-hidden="true"></span> Email me a weekly digest</label></form></section>

choice-field

Cartões de opção — o grupo de rádios ou caixas que preferimos. O Title fica curto; o Desc explica.

Escolha uma

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Plan</legend><div rst-choice-cards><label><input type="radio" name="plan" value="free"><span><span rst-choice-title>Free</span><span rst-choice-desc>One project, community support.</span></span></label><label><input type="radio" name="plan" value="pro" checked><span><span rst-choice-title>Pro</span><span rst-choice-desc>Unlimited projects and a support inbox.</span></span></label></div></fieldset></form></section>

Escolha as que quiser

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Send me</legend><div rst-choice-cards><label><input type="checkbox" name="digest" value="replies" checked><span><span rst-choice-title>Replies</span><span rst-choice-desc>As they happen.</span></span></label><label><input type="checkbox" name="digest" value="weekly"><span><span rst-choice-title>Weekly digest</span><span rst-choice-desc>Monday mornings.</span></span></label></div></fieldset></form></section>

form-foot

A linha final de um formulário: um botão de envio principal e uma ligação opcional para cancelar. Cancelar é uma ligação, porque sair de um formulário é navegar.

Guardar e cancelar

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Save post</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

Só enviar

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Send invitation</button>
</div></form></section>

Em repouso — o botão antes de acontecer alguma coisa

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Publish</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

Um botão que MUDA alguma coisa recebe um estado de carregamento; um botão que apenas revela alguma coisa — uma divulgação, um menu pendente, um separador — não. O rastrillo.js aplica essa regra a todos os botões de envio de todos os formulários, sem nada para ativar.

A trabalhar — o que o rastrillo.js escreve quando o formulário sai

Pré-visualização 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
<button rst-btn="primary" type="submit" aria-busy="true" data-idle-label="Publish" disabled><span rst-spin aria-hidden="true"></span>Publishing…</button>
<a rst-btn href="/posts">Back to posts</a>
</div></form></section>

Apenas o botão em que se clicou: todos os outros botões de envio do formulário mantêm o seu nome e o seu valor, e o próprio formulário fica protegido contra um segundo envio. data-busy="false" desativa a regra, no formulário ou num botão; data-busy-label substitui o texto. Sem scripts nada disto acontece e o formulário é enviado exatamente como sempre foi, por isso a idempotência continua a ser tarefa do servidor.

confirm-form

A linha de ações da página de confirmação. As ações destrutivas têm rota própria em vez de um diálogo, por isso não há nada para programar.

Destrutivo

Pré-visualização 
<section rst-box><form rst-form-actions method="post" action="/posts/1/delete"><input type="hidden" name="csrf" value="tok-123"><input type="hidden" name="id" value="1"><a rst-btn="ghost" href="/posts/1">Cancelar</a><button type="submit" rst-btn="danger">Delete this post</button></form></section>

Caso normal, com a redação de cancelar por omissão

Pré-visualização 
<section rst-box><form rst-form-actions method="post" action="/posts/1/publish"><a rst-btn="ghost" href="/posts/1">Cancelar</a><button type="submit" rst-btn="primary">Publish</button></form></section>

Sem CancelLabel, por isso a ligação de cancelar é redigida a partir do catálogo.