Notice
Una notificación dentro de la página: lo que la persona necesita saber ahora, con el estado indicado por color, ícono y palabra.
En esta página
Playground
El primer aviso sale mañana a las 9.
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Recordatorio guardado</strong><p>El primer aviso sale mañana a las 9.</p></div>Cuándo usarlo
- Después de una acción, justo encima de su contenedor, para indicar el resultado: "Cronograma creado".
- Para algo que afecta a toda la página: un servicio caído, un plazo próximo.
Cuándo no usarlo
- Error de campo: ErrorMessage y ErrorSummary.
- Estado de un elemento: Tag.
- En una esquina de la pantalla, como un toast: nunca.
Ejemplos
Los docs adoptaron la forma de guías.
La primera notificación sale mañana a las 9.
Cuérrase de nuevo hoy a las 3.
La conexión se ha perdido. Lo que escribiste sigue aquí; inténtalo de nuevo.
Cuatro
Todos con la línea alrededor, en el color de estado; la información usa la línea suave, sin color de estado. Ninguno es naranja.
Mostrar código
<div class="feitio-notice" data-status="ok" role="status">
<svg class="feitio-icon" aria-hidden="true">…</svg>
<strong>Agendamento criado</strong>
<p>O primeiro aviso sai amanhã às 9h.</p>
</div>Cerrar y tiempo
Los docs adoptaron la forma de guías.
Con cerrar
La X en la esquina: el aviso permanece hasta que la persona lo cierra. Sin la X, permanece hasta que cambia la pantalla.
Mostrar código
<div class="feitio-notice">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">…</button>
</span>
</div>El primero sale mañana a las 9.
Con tiempo
Con data-timeout, el aviso se va por sí solo, y el hilo alrededor de la X se deshilacha con el paso del tiempo. Pasa el mouse sobre él: el tiempo para.
Mostrar código
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
…
<span class="tools">
<button type="button" class="close" aria-label="Fechar o aviso">
<svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
</button>
</span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>- El tiempo está fuera por defecto. Cuando está activado, el botón de cerrar viene con él, así que la persona puede cerrarlo antes.
- Solo para éxito e información. Las advertencias y errores nunca se van por sí solos: la persona necesita verlos.
- El tiempo se detiene mientras el mouse o el foco están en la notificación. Una notificación ya en la página solo empieza a contar cuando aparece en la ventana.
- Ya en pantalla, no vuelve a aterrizar: si ocurre la misma acción de nuevo, la notificación cambia su texto y reinicia el tiempo, sin la animación del papel. Al salir, se desvanece y el espacio se cierra deslizándose.
Anatomía
El primero sale mañana a las 9.
- Icono de estado.
- Título: qué sucedió, brevemente.
- Cerrar, opcional. Con el tiempo, el hilo alrededor de la X se deshará hasta que la notificación desaparezca.
- Texto, opcional: qué hacer o qué viene a continuación.
- Caja: el fondo y la línea en el color de estado.
Hacer y no hacer
Do
La propia palabra del botón, en dos palabras.
Don’t
Tu solicitud se procesó con éxito.
""Success" no dice qué funcionó y el texto repite el título.
Escritura
- Título: ¿qué pasó?, con la palabra de la acción ("Se creó el calendario").
- Texto: solo si indica qué hacer o qué viene después.
Donde va
- Justo encima del contenedor donde ocurrió la acción, con el StatusOverlay.
- En la parte superior del contenido, cuando se refiere a toda la página.
- Dentro de un bloque, cuando solo se refiere a él.
Accesibilidad
- Después de una acción,
role="status"(orole="alert"para errores), para que los lectores de pantalla lo anuncien. - El estado nunca por color solo: icona y palabra en el título.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-notice" | obligatorio | La caja de aviso. |
data-status | nada, "ok", "warn", "error" | Información (sin atributo), éxito, advertencia o error. |
role | "status", "alert" | Cuando aparece después de una acción. |
class="tools" + class="close" | opcional | El botón de cerrar, arriba a la derecha. |
data-timeout | milisegundos | Se va después de este tiempo; solo con éxito e información. Lleva el hilo alrededor de la X. |
feitioNotice.show(el) | JS | Muestra la notificación después de una acción: aterriza como papel o solo reinicia el tiempo si ya está en pantalla. |