sistema de design do rastrillo

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

Rota

As peças que são uma resposta inteira e não um pedaço de uma.

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.

error-page

O corpo inteiro de uma resposta de erro: o estado, uma frase honesta, um caminho de volta e referências de 500 que um administrador pode usar.

404 — não encontrado

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>Não encontrámos essa página</h1>
  <p rst-error-body>A ligação pode estar desatualizada ou a página pode ter mudado. Verifique o endereço ou volte ao início.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a></p>
</div>

403 — proibido

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>Não pode ver isto</h1>
  <p rst-error-body>A sua conta não tem acesso aqui. Se acha que devia ter, fale com quem gere este site.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a> <a rst-btn href="/posts">Voltar</a></p>
</div>

422 — não processável

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>Não foi possível enviar</h1>
  <p rst-error-body>Algo no que foi enviado não estava certo. Volte atrás e tente de novo; nada foi guardado.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a> <a rst-btn href="/posts/1/edit">Voltar</a></p>
</div>

500 — erro do servidor

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>Algo correu mal do nosso lado</h1>
  <p rst-error-body>A culpa não é sua. O problema foi registado. Tente de novo daqui a pouco; se continuar a acontecer, indique a referência abaixo.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">Referência: k3f9tq</p>
</div>

O 500 é o único estado com referência: quem opera o sistema pode procurá-la com grep nos registos.

503 — indisponível

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>Estamos indisponíveis por instantes</h1>
  <p rst-error-body>O site está a ser atualizado ou está ocupado. Tente de novo dentro de um minuto.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a></p>
</div>

Qualquer outro caso — o par genérico

Computador Telemóvel Código

<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>Algo não está certo</h1>
  <p rst-error-body>Não foi possível concluir esse pedido. Volte atrás e tente de novo.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Página inicial</a></p>
</div>

Cinco estados estão redigidos no catálogo da framework. Um sexto recorre ao par genérico em vez de mostrar a quem lê o nome de uma chave que falta.

back-nav

A ligação para subir um nível, por cima de um ecrã de detalhe ou de edição.

Voltar a um registo

Computador Telemóvel Código

<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

O seletor de idioma: um menu details com formulários POST de um só campo para /_locale, para que a escolha fique no cookie de idioma e quem lê se mantenha no mesmo caminho.

Doze idiomas, com o atual destacado.

Computador Telemóvel Código

<details rst-dropdown rst-locale name="rst-menus">
  <summary>Idioma<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt" aria-current="true">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

Este envia para /_locale, o que exigiria um servidor. O seletor no cabeçalho desta página é a versão só com ligações.