Idioma

English Gaeilge 简体中文 Español हिन्दी Português বাংলা Русский 日本語廣東話 Tiếng Việt العربية

sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: plain. Idioma: Español.

Formulario

Todos los controles, en los estados en que los pone un formulario real. Cada uno va dentro de un rst-box con relleno, porque esa es la regla que estos parciales dan por hecha.

Elementos de interfaz ya hechos y coherentes entre sí, renderizados en el servidor.

El vocabulario del propio framework los llama partials: ui.Templates() devuelve partials, y docs/site/templates.md los documenta con ese nombre. La palabra de esta página cambió; la del código, no.

Los enlaces aquí no están activos

Enlaces inactivos; se facilita el código del ejemplo.

Cada ejemplo de abajo va en su propio marco.

El contenido de ejemplo está en inglés. Los armazones de ejemplo sí están traducidos.

field

Etiqueta, campo, pista opcional, ayuda y error. El control de tipo texto general, con un ID explícito.

Sin adornos

Escritorio Móvil Código

<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>

Con una pista

Escritorio Móvil Código

<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>

Con ayuda debajo del control

Escritorio Móvil Código

<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>

Obligatorio

Escritorio Móvil Código

<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>

Con un error

Escritorio Móvil Código

<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>

Corto

Escritorio Móvil Código

<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>

El campo principal

Escritorio Móvil Código

<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

Un campo de texto con etiqueta; los ids se derivan de Name. El asterisco del marcador de obligatorio es aria-hidden: la señal programática es el atributo required del campo.

Sin adornos

Escritorio Móvil Código

<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>

Con una pista

Escritorio Móvil Código

<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>

Obligatorio

Escritorio Móvil Código

<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>

Con un error

Escritorio Móvil Código

<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>

El campo principal

Escritorio Móvil Código

<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>

Añade Primary al campo principal del formulario, por ejemplo un título o un nombre, para obtener un campo más destacado.

field-textarea

La envoltura de field-text alrededor de un textarea.

Sin adornos

Escritorio Móvil Código

<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>

Con una pista

Escritorio Móvil Código

<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>

Con un error

Escritorio Móvil Código

<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>

Obligatorio

Escritorio Móvil Código

<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

La envoltura de field alrededor de un select nativo. A partir de diez opciones, el select activa el combo con filtro de select.js; lo que el formulario envía sigue siendo el select nativo.

Tres opciones: un select nativo

Escritorio Móvil Código

<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>

Doce opciones: el combo con filtro

Escritorio Móvil Código

<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="Escribe 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 diez opciones, el parcial activa select.js. Por debajo de diez, no: buscar entre un puñado de elementos es mobiliario, no ayuda.

Doce opciones, Plain: la mejora rechazada

Escritorio Móvil Código

<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>

Obligatorio, con un error

Escritorio Móvil Código

<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 a mano, con optgroups

Escritorio Móvil Código

<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="Escribe 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>

Aquí Options es una lista plana, así que las opciones agrupadas son marcado que escribe la aplicación. select.js dibuja los grupos en vez de descartarlos; un select escrito a mano también puede rechazar la mejora del todo con data-rst-select="false".

field-check

El único mecanismo de conmutación: una casilla de verificación real con aspecto de interruptor, sin perder teclado ni lector de pantalla.

Encendido

Escritorio Móvil Código

<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>

Apagado

Escritorio Móvil Código

<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>

Desactivado

Escritorio Móvil Código

<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

Tarjetas de opción: el grupo de radios o casillas que preferimos. Title se mantiene corto; Desc explica.

Elige una

Escritorio Móvil Código

<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>

Elige las que quieras

Escritorio Móvil Código

<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

La fila final de un formulario: un envío principal y un enlace opcional para cancelar. Cancelar es un enlace, porque salir de un formulario es navegar.

Guardar y cancelar

Escritorio Móvil Código

<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>

Solo enviar

Escritorio Móvil Código

<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>

En reposo: el botón antes de que ocurra nada

Escritorio Móvil Código

<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>

Un botón que CAMBIA algo recibe un estado de carga; un botón que solo revela algo —una divulgación, un desplegable, una pestaña— no. rastrillo.js aplica esa regla a todos los botones de envío de todos los formularios, sin nada que activar.

Trabajando: lo que rastrillo.js escribe al salir el formulario

Escritorio Móvil Código

<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>

Solo el botón que se pulsó: los demás botones de envío del formulario conservan su nombre y su valor, y el formulario queda protegido frente a un segundo envío. data-busy="false" desactiva la regla, en el formulario o en un botón; data-busy-label sustituye el texto. Sin scripts no ocurre nada de esto y el formulario se envía igual que siempre, así que la idempotencia sigue siendo cosa del servidor.

confirm-form

La fila de acciones de la página de confirmación. Las acciones destructivas tienen su propia ruta en vez de un diálogo, así que no hay nada que programar.

Destructivo

Escritorio Móvil Código

<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, con la redacción de cancelar por defecto

Escritorio Móvil Código

<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>

Sin CancelLabel, así que el enlace de cancelar se redacta desde el catálogo.