Catálogo · Referencia
Referencia de clases
Todas las etiquetas y clases del catálogo, desde la búsqueda y el consentimiento de cookies hasta los patrones de un tipo de sitio, el elemento al que se aplican y su función, en un solo lugar.
Archivos: components/search.css, components/cookie-consent.css, components/lang-switch.css, components/submenu.css, components/announcement.css
Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés
Busca una etiqueta o una clase por nombre. La página de cada componente incluye su marcado y las recomendaciones de uso.
La estructura de página que antes proporcionaba el catálogo, desde la carcasa hasta el pie, está en core (maquetación, enlace para saltar al contenido, imagen, franja). Las clases de los patrones de un tipo de sitio están en sus propias páginas, en los grupos del catálogo.
Búsqueda
| Clase | Elemento | Descripción |
|---|---|---|
<luz-search> |
<luz-search> |
El elemento que define search.min.js. Contiene el enlace alternativo, el botón y el diálogo; el enlace y el botón comparten un espacio para que nada se mueva cuando el botón sustituye al enlace. |
.luz-search__fallback |
<a> |
El enlace a un índice de todas las páginas, visible hasta que funciona la búsqueda. Es un control elevado, con la lupa antes del texto. |
.luz-search__fallback-label |
<span> |
El texto del enlace, que también es su nombre. Se recorta, pero no se elimina, junto a un botón compacto a 768 píxeles o menos. |
.luz-search__trigger |
<button> |
El botón de búsqueda, con forma de campo: etiqueta y, después, el atajo de teclado. Está oculto en el marcado y en su lugar; el script lo muestra. |
.luz-search__trigger--compact |
<button> |
Modificador. A 768 píxeles o menos solo se ve la lupa, y también aparece el enlace junto a ella; el texto sigue formando parte de sus nombres. |
.luz-search__trigger-icon |
<svg> |
La lupa, con el color del texto, en el botón y en el enlace. |
.luz-search__trigger-label |
<span> |
La etiqueta visible, que también es el nombre del botón. |
.luz-search__trigger-key |
<kbd aria-hidden="true"> |
La indicación del atajo «Ctrl K». Oculta en pantallas táctiles y para las tecnologías de asistencia, que leen aria-keyshortcuts. |
.luz-search |
<dialog> |
Con .luz-modal: el diálogo de búsqueda, una columna con resultados desplazables; a pantalla completa a 768 píxeles o menos. |
.luz-search__body |
<search> |
El campo, el estado y los resultados. |
.luz-search__head |
<div> |
El título y el botón de cierre en una fila que se ajusta. |
.luz-search__title |
<h2> |
El nombre del diálogo; su etiqueta da nombre al campo. |
.luz-search__field |
<div> |
El campo, con una lupa svg decorativa al principio. |
.luz-search__status |
<p> |
El número de resultados, role="status", en tamaño pequeño y con el color atenuado. |
.luz-search__close |
<button> |
El botón de cierre, de 44 píxeles de alto, dentro de un form method="dialog". |
.luz-search__results |
<div> |
Los grupos de resultados: cada uno con un encabezado y una lista de enlaces. |
.luz-search__foot |
<p> |
La última línea, con el enlace a la página del índice. |
Selector de idioma
| Clase | Elemento | Descripción |
|---|---|---|
<luz-lang-switch> |
etiqueta a |
El bloque: contiene el botón y la lista, sin clase ni rol propios. Define --luz-lang-switch-top, la distancia desde arriba a la que se abre la lista (por defecto, la de --luz-bar-h de core). |
.luz-lang-switch__button |
<button> |
Abre la lista con popovertarget. Muestra el idioma actual; su nombre empieza por la etiqueta, que está oculta. |
.luz-lang-switch__icon |
<svg> |
El globo, decorativo y con el color del texto. |
.luz-lang-switch__name |
<span> |
El nombre del idioma actual en el botón. Se recorta por debajo de 360 píxeles y solo se ve el globo, pero sigue formando parte del nombre del botón. |
.luz-lang-switch__menu |
<nav> |
El popover con la lista, fijado debajo de la cabecera al final de la fila. |
.luz-lang-switch__title |
<p> |
El nombre visible de la lista, que etiqueta la navegación. |
.luz-lang-switch__list |
<ul> |
Los idiomas, uno por fila y sin viñetas. |
.luz-lang-switch__link |
<a> |
Un idioma que se nombra a sí mismo, con lang y hreflang; en negrita y subrayado con aria-current. |
Submenú
| Clase | Elemento | Descripción |
|---|---|---|
<luz-submenu> |
alrededor de un <details> |
Una etiqueta sin clase: un elemento de los enlaces de la cabecera que contiene otros enlaces. <summary> es el botón y el <ul> siguiente contiene los enlaces. Sin scripts. |
Anuncio y consentimiento de cookies
| Clase | Elemento | Descripción |
|---|---|---|
<luz-announcement> |
alrededor de un <section> |
Una etiqueta sin clase: una franja sobre la cabecera con un anuncio breve y un enlace, cuyo texto se alinea con la columna de la cabecera. Sin scripts ni botón de cierre. |
tone="warning" |
<luz-announcement> |
Los colores de aviso, para algo que impide a quien visita la página hacer lo que venía a hacer; las palabras también lo indican. |
.luz-cookie-consent |
<section hidden> |
El banner de cookies, dentro de un <luz-cookie-consent> anterior a la cabecera, que se muestra como una franja fija en la parte inferior de la ventana. Está oculto en el marcado: cookie-consent.min.js lo muestra si no hay ninguna respuesta guardada. |
.luz-cookie-consent__title |
<h2> |
El encabezado del banner, en sans; da nombre a la región. |
.luz-cookie-consent__choices |
<details> |
Las categorías de cookies opcionales, como casillas de verificación en un formulario, debajo de Aceptar y Rechazar. |