Todos los componentes (204)
Componentes
204 componentes y 2486 props documentadas. Cada ficha cuenta qué es, cuándo usarlo y cuándo no, cómo responde al teclado y qué anuncia un lector de pantalla. El catálogo y los textos salen del propio paquete, así que lo que ves aquí es lo que se instala.
Acciones
Lo que el usuario pulsa para que pase algo.
Una acción con aspecto de enlace que va dentro de una frase.
Los controles de una tabla, de un editor o de una galería, juntos en una barra con nombre.
La barra que sale al marcar filas de una tabla o de una lista.
El botón de siempre.
Un botón que se queda pulsado.
El «Cargar más» de una lista paginada, con el recuento debajo («40 de 120 pedidos», con los números del idioma.
Compartir una página.
Baja un gráfico, una tabla o cualquier trozo de la página como imagen.
Un botón que solo lleva un icono.
Cambiar de tema.
La acción de siempre con sus variantes al lado.
Una acción suelta que se queda flotando sobre la página, fija en una esquina.
Un campo con su botón, o varios campos, pegados sin huecos y con las esquinas de unión cuadradas.
Un dato con su botón de copiar al lado.
Lo que navega es un enlace, aunque se pinte como un botón.
Varios botones pegados que son UN bloque de acciones.
El menú del clic derecho.
El menú de los tres puntos.
El botón de subir.
Campos
Entrada de datos, con su etiqueta, su ayuda y su error.
La barra de un editor de texto enriquecido, sin el editor.
El campo con autocompletado.
Entrada de dinero que entiende cómo se escribe en cada idioma.
Los datos de la tarjeta en un bloque.
El campo de una línea, con etiqueta, ayuda y error ya cableados.
Un número con formato del idioma.
El código CNAE-2009 de la actividad económica.
El código de un solo uso.
Campo con lista de sugerencias que también admite texto libre.
La contraseña, con el ojo para verla.
El código de descuento de la cesta.
La dirección postal de España en un bloque.
El NIF, el NIE o el CIF, con la letra de control comprobada de verdad.
Campo de etiquetas.
Firmar un albarán o un consentimiento, de dos formas.
Form valida un formulario entero con un solo esquema (schema), el mismo que usa el servidor, y coloca cada error donde toca.
Un campo con segmentos pegados.
El número de cuenta, con el módulo 97 comprobado.
La matrícula de un vehículo español.
Las piezas con las que están hechos todos los campos de la biblioteca.
El número de la Seguridad Social (NUSS o NAF), con los dos dígitos de control comprobados de verdad.
Un desplegable con un árbol dentro.
País > provincia > ciudad en un solo campo, con una columna por nivel.
El teléfono con prefijo de país y número en la misma caja, pero como dos controles.
El campo de texto largo.
Selector del tipo de IVA.
Elección
Elegir entre opciones: una, varias o ninguna.
Una casilla de verificación.
Un chip que se activa y se apaga.
Una barra con uno o dos tiradores para elegir un valor, o un rango, a bulto dentro de un intervalo conocido.
El filtro de precio de una tienda.
Varios ToggleChip juntos, con un nombre para el conjunto.
Un grupo de facetas de la columna de filtros de una tienda.
Un grupo de opciones que se excluyen.
Botones pegados en una sola pieza para elegir una opción (o varias) que se aplica en el momento.
Un interruptor de encendido y apagado para un ajuste que se aplica en el momento, sin botón de Guardar.
Una lista de opciones a la vista, sin desplegar, para elegir una o marcar varias.
Las tripas de ColorPicker, sueltas.
Los atajos de fechas de un panel (Hoy, Últimos 7 días, Este mes…) y, al lado, el campo para un rango a medida.
Un desplegable para elegir una opción de una lista.
El menos y el más de una línea de carrito.
Elegir un color.
Idioma y moneda, en el pie de una tienda o en los ajustes.
El metal y la talla (o el color y la talla) de un producto, con la disponibilidad mirada cruzada.
Elegir varios valores de una lista.
Una opción de RadioGroup pintada como tarjeta.
Dos listas para repartir cosas.
Estrellas para puntuar o para enseñar una media.
Fechas y hora
Calendarios, horarios y huecos disponibles.
La agenda de una semana o de un día.
El mes con los eventos marcados en cada día (hasta tres puntos de color y «+2» si hay más) y, al lado, la lista de lo que hay el día donde está el foco.
El mes a la vista, sin desplegar nada.
El mes con los festivos marcados en cada día (con su tipo y, si la fuente lo trae, la comunidad o el municipio) y, encima, cuántos días se trabaja ese mes.
El plan de trabajo en barras.
Una cuenta atrás en segundos.
La fecha y la hora juntas, en un solo campo.
Una hora escrita por partes, como el campo de fecha.
El horario de apertura de un negocio.
Selector de mes y año.
Dos fechas que van juntas.
Una fecha escrita por partes (día, mes y año, en el orden del idioma.
Pedir cita.
«hace 3 minutos», «dentro de 2 horas», «ayer».
Estructura
El armazón de una pantalla: cabecera, columnas y lo que se queda pegado.
El armazón de una aplicación.
El pie de una página.
Un bloque que se pliega, suelto.
Maquetación
Las piezas que colocan todo lo demás.
Apila o pone en fila con una separación de la escala.
Una zona con desplazamiento propio y barras finas del tema.
Centra lo que lleva dentro, en horizontal y en vertical.
Centra el contenido en horizontal y le pone un ancho máximo de lectura, con un relleno a los lados para que el texto no toque el borde de la pantalla.
Una caja con una proporción fija, ancho entre alto, que ocupa todo el ancho de su hueco.
Una rejilla que cede sola.
Superficies
Donde se apoya el contenido.
La cara, o las iniciales, de una persona.
Banda de estado dentro de una pantalla.
La cinta de ancho completo de arriba de la página.
La cinta fina pegada arriba (o abajo) de la ventana que dice cuánto llevas leído de una página larga.
El número grande de un cuadro de mando, con su variación.
Hueco gris, con un brillo que pasa, mientras llega el contenido.
La cinta de «sin conexión».
El hueco cuando no hay nada que enseñar.
Etiqueta de estado.
Varios avatares apilados, con un «+N» al final para los que no caben.
Un precio, con su moneda y en el formato del idioma activo.
Cuánto hay de algo.
Hueco de imagen con forma fija.
Barra de progreso de una tarea que avanza y acaba.
La pantalla de después.
Raya de separación.
Superficie con cabecera (título, subtítulo y un hueco a la derecha), cuerpo, medios a sangre y un pie separado por un divisor.
La línea pequeña de un cuadro de mando.
Capas
Lo que se abre por encima de la página.
La banda de consentimiento de cookies, abajo y sin las trampas de costumbre.
«Tu sesión está a punto de caducar».
La campana con el contador de lo que está sin leer y, al pulsarla, el panel con los últimos avisos y su antigüedad («hace 4 minutos»).
La equis de una capa.
La pregunta de seguridad pegada al botón que la provoca.
Un panel flotante pegado a su botón, con lo que sea dentro.
Un diálogo modal.
La cola de notificaciones.
La paleta de comandos, el Ctrl+K de toda la vida.
Un panel que entra por un lado de la pantalla.
Preguntar «¿seguro?» desde cualquier componente sin montar un diálogo y su estado en cada pantalla.
Una tarjeta con más información que aparece al pasar el ratón por un enlace o al llegar a él con el teclado.
Ayuda contextual.
La visita de bienvenida.
Estado
Avisar de lo que pasa: cargando, hecho, error o sin conexión.
Datos
Enseñar números y listas sin que duela leerlos.
Bandera de un país, por su código ISO de dos letras.
Barras apiladas.
Un bloque de código con su cabecera (el nombre del fichero o lo que sea), números de línea si se piden, líneas marcadas y botón de copiar.
Un código QR dibujado en SVG, sin dependencias ni imagen.
Un hilo de comentarios con respuestas anidadas.
Un hilo de mensajes.
Una fila genérica.
El reparto de un total en un anillo.
Lo mismo que LineChart, con el área de debajo de cada línea rellena.
Las barras de un cuadro de mando.
Líneas de varias series sobre las mismas categorías.
Un gráfico de radar.
Lo que le ha ido pasando a algo (un pedido, una factura, un ticket).
Los adjuntos de algo (un pedido, una factura, un ticket).
Pares etiqueta-valor.
Una lista de miles de filas que no atasca el navegador.
La rejilla de días por semanas, como la del perfil de GitHub.
Datos que se comparan por columnas (facturas, pedidos, clientes), con orden, filtros por columna, selección, paginación, columnas configurables y totales al pie.
Un tablero tipo kanban.
Gestión
Las piezas de un panel de administración: tablas, tableros y filtros.
Las fichas de los filtros que están puestos ahora mismo, encima de una tabla o de una lista.
Las líneas de una factura, editables.
La lista de puesta en marcha.
Una lista que se reordena arrastrando y con el teclado, que es la mitad que casi todo el mundo se deja.
Dos o más paneles con un separador que se arrastra.
Subir ficheros de verdad, en cuanto se eligen.
Una zona para soltar ficheros, con su botón para elegirlos.
Comercio
Todo lo que lleva de un producto a un pedido.
Pagar a plazos.
Una tira de cosas que se recorre.
Antes y después.
La pregunta de 0 a 10 («¿Recomendarías la tienda a un amigo?») y, en cuanto se elige una nota, la de por qué.
Por dónde va un envío.
El visor de fotos de una ficha de producto.
La tabla de tallas de una prenda o de una joya, con el cambio a pulgadas y la talla que toca según la medida que se escriba.
El resumen de las opiniones de un producto.
El resumen de un pedido o de un carrito.
Los métodos de envío como tarjetas para elegir uno.
La comparativa de planes o tarifas de una landing.
La ficha de un producto en una rejilla de tienda.
Tipografía
Títulos, texto, citas y código con la misma voz.
Una cita en bloque, con una raya a su lado y, si se dice quién lo dijo, la atribución debajo precedida de una raya larga.
Un trozo de código DENTRO de una frase.
Lista de texto.
Un trozo de texto resaltado a mano, dentro de una frase.
Resalta dentro de un texto lo que coincide con lo buscado.
Una tecla del teclado, dentro de una frase.
Todo el texto corrido de la aplicación.
Texto que se quita de la VISTA pero no del árbol de accesibilidad.
Encabezado.
IA
Las piezas de una interfaz de asistente: mensajes, razonamiento, herramientas y entrada de texto.
Un fichero adjunto a un mensaje.
La barra de buscar DENTRO de algo -una conversación larga, un documento-.
La caja donde se escribe a un asistente.
Una llamada a una herramienta.
Un mensaje de un chat con un asistente.
El razonamiento de un modelo, plegado.
El registro de lo que está haciendo un agente.
Con qué se atiende lo siguiente.
Las respuestas rápidas que propone un asistente.
Un fichero que ha generado un asistente, con su vista previa a un clic.
Cuánto ha costado una respuesta.
El visor de una imagen a pantalla casi completa.
Más
Lo que no cae en ninguna de las otras familias.
Lleva los enlaces de la biblioteca (Link, ButtonLink, las migas, el menú lateral, el título de una tarjeta con href) por el enrutador de la aplicación.
Tres piezas para que una factura, un albarán o un presupuesto salgan bien en papel.
Todo lo que la librería necesita alrededor, en una línea.
Fija el idioma de los componentes que formatean datos.
Notas de voz, un mensaje grabado, un audio corto.
Todo lo que una página necesita para que los buscadores y las redes la entiendan, en @amset/ui/seo.