Saltar al contenido principal

Core · @luz-ds/core

Core

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Todos los componentes de core, agrupados por tarea, con un ejemplo en vivo, el marcado que puedes copiar y cuándo usarlos.

Un componente es una pieza reutilizable, casi siempre asociada a un elemento HTML: un botón, un campo, una tabla. Un patrón combina componentes para realizar una tarea del producto, como la estructura de una página o la búsqueda del sitio; los patrones están en el Catálogo.

Acciones y entrada

  • Botón

    Inicia una acción en la página actual, como guardar, enviar o abrir un diálogo.

  • Botón para copiar

    Copia un comando o un valor en el portapapeles e indica que lo ha hecho.

  • Desplegable

    Un botón que abre debajo una lista breve de acciones o enlaces.

Campos de formulario

  • Campos de entrada

    Un control para cada tipo de entrada: el tipo indica al navegador el teclado, el selector y la comprobación.

  • Elección

    Elegir entre opciones que el lector ve: casilla de verificación, botón de opción, interruptor y selector.

  • Valores

    Mostrar o calcular un valor en lugar de recoger texto: medidor y resultado.

  • Partes del campo

    Lo que envuelve a un control: la etiqueta, la pista, el error y el grupo.

Mostrar contenido

  • Acordeón

    Muestra y oculta secciones de contenido con los elementos nativos details y summary, de una en una si asignas un nombre al grupo.

  • Avatar

    Identifica a una persona o un equipo con sus iniciales o una foto, en tres tamaños.

  • Franja

    Aplica un tono a un bloque de la página de lado a lado, mientras su contenido conserva el ancho de columna.

  • Tarjeta

    Agrupa unos pocos datos sobre un elemento en una superficie con borde.

  • Código

    Muestra código dentro de una frase o en un bloque con colores de sintaxis en todos los modos.

  • Figura

    Muestra una imagen, un gráfico o un diagrama con un pie que indica qué representa.

  • Iconos

    Permite explorar un conjunto de iconos por nombre y copiar el SVG de cada uno.

  • Línea de metadatos

    Muestra en una línea algunos datos sobre un elemento, como la fecha, el tiempo de lectura y el autor, separados por puntos.

  • Medidor

    Representa un valor dentro de un intervalo conocido con una barra junto a la cifra, mediante el elemento meter nativo.

  • Texto corrido

    Establece líneas de unos 70 caracteres y espacio entre bloques de texto largo, sea cual sea el marcado que escriba el editor.

  • Tabla

    Compara registros con varios atributos, en filas y columnas que se leen bien a 320 px.

  • Etiqueta e insignia

    Etiqueta un elemento con un estado o categoría breves (etiqueta), o muestra una cantidad (insignia).

Avisos y estado

  • Alerta

    Informa al lector sobre la página o una tarea: comunica información, un éxito, un aviso o un error.

  • Diálogo modal

    Pide tomar una decisión antes de continuar, mediante un elemento dialog nativo.

  • Progreso

    Muestra cuánto ha avanzado una tarea que lleva tiempo, mediante el elemento progress nativo.

  • Aviso emergente

    Confirma un resultado pequeño, como «Borrador guardado», sin interrumpir la lectura.

  • Tooltip

    Añade una indicación breve a un control al pasar el puntero o enfocarlo; nunca contiene información esencial.

Navegación

  • Migas de pan

    Muestra dónde se encuentra la página en el sitio mediante una ruta de enlaces a sus páginas superiores.

  • Modo de color

    Permite elegir Automático, claro, oscuro o alto contraste: con botones de opción que funcionan sin JavaScript o con un botón redondo que los recorre.

  • Paginación

    Enlaza a las páginas de una lista que se extiende a lo largo de varias páginas y marca la página actual.

  • Enlace para saltar al contenido

    Permite a quienes usan el teclado saltarse la cabecera e ir al contenido principal.

  • Pestañas

    Permite cambiar entre paneles de contenido relacionado en un mismo lugar; sin JavaScript, los paneles se muestran apilados en secciones.

Multimedia

  • Imagen

    Muestra una imagen en un marco de forma fija, con una superficie lisa mientras se carga o si falta.

  • Reproductor multimedia

    Reproduce un vídeo, un sonido o un archivo MIDI en la página, con los mismos controles para los tres.

Ayudas

  • Objetos de maquetación Organiza bloques en una pila, una fila o una cuadrícula; coloca elementos junto a una imagen o agrupa acciones, y estructura la página con su barra fija mediante las clases o-*
  • Clases de utilidad Clases pequeñas u-* que hacen una sola cosa cada una, para los casos que no cubre un componente.
  • Fotogramas clave Cinco animaciones compartidas para tus propios componentes, que se detienen cuando se solicita movimiento reducido

Última actualización · Editar esta página · Avisar de un problema