Quiero hablar sobre el maravilloso elemento <details> y mostrar algunos ejemplos de su uso, de simple a loco.
Está familiarizado con el modelo de diseño de un componente que puede cambiar su estado de visible a oculto:
.component { display:none; } .component.open { display:block; }
toggleButton.onclick = () => component.classList.toggle('open')
Ahora olvídalo. Hay un elemento que puede hacer esto fuera de la caja. Meet - <details>
El elemento HTML <details> se usa para revelar información oculta (adicional).
Aplicación básica
En primer lugar, veamos cómo funciona este elemento:
Tenga en cuenta que el ejemplo funciona sin ningún estilo adicional o JavaScript. Toda la funcionalidad está integrada en el navegador mismo.
De manera predeterminada, el texto visible depende de la configuración de idioma de su sistema, pero puede cambiarlo agregando el elemento <summary> a <details> <summary> :
Para cambiar el estado de un elemento en html solo necesita agregar el atributo open
<details open> ... </details> <details> ... </details>
Y para administrar el estado usando JavaScript, se proporciona una API especial:
const details = document.querySelector('details') details.open = true
Algunas palabras sobre accesibilidad
El elemento <summary> es <summary> . Es decir, moviéndose por la página desde el teclado, accederá a este elemento. Pero el contenido puede enfocarse solo si <details> abierto, es decir, el foco nunca recaerá en elementos invisibles dentro de <details> .
Por lo general, los lectores de pantalla pueden funcionar bien con el uso estándar de <details> y <summary> . Existen algunas variaciones en el anuncio según el programa y el navegador. Más detalles
Ejemplos de uso
A continuación, repetiré aproximadamente algunos de los componentes de la documentación de arranque, pero con poco o nada de JavaScript.
Cambiar el marcador
Lo primero que puede necesitar es cambiar la apariencia del marcador. Esto se hace de manera muy simple:
summary::-webkit-details-marker { }
O puede ocultar el marcador estándar e implementar el suyo
details summary::-webkit-details-marker { display: none } details > summary { list-style: none; } details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } details[open] summary:before { content: '\f146'; }
Componente de colapso
Todo es simple aquí. La funcionalidad básica es la misma. Solo es necesario cambiar ligeramente la apariencia:
Componente de acordeón
Repitamos el ejemplo anterior, cambie ligeramente la apariencia de <summary> y obtenga el acordeón:
Pero, como puede ver, un elemento no se cierra cuando se abre otro. Para lograr esto, necesitamos un par de líneas de JavaScript. Debe rastrear la apariencia del atributo abierto en uno de los elementos <details> y eliminarlo del resto:
Componente Popover
Esta implementación es muy similar al componente Collapse, con la diferencia de que el contenido <details> tiene un posicionamiento absoluto y se superpone al contenido.
Componente desplegable
Básicamente, este es el mismo componente Popover. Solo la apariencia es diferente.
El mismo ejemplo, solo con un botón separado
Pero el componente desplegable tiene una diferencia más importante: al hacer clic fuera de él, debe estar oculto. Para implementar esto nuevamente, necesitará escribir un par de líneas de JavaScript.
Componente modal
Y finalmente, un ejemplo de una ventana modal.
En general, <details> no <details> la mejor opción para implementar este componente. Hay un elemento mucho más adecuado: <dialog> , pero tiene muy poca compatibilidad con el navegador.
Referencias
¿Puedo usar detalles y elementos de resumen?
Elemento de detalles de MDN
Elemento de detalles W3C
UPD
Decidí agregar otro ejemplo de uso de <details> : navegación de niveles múltiples. Una vez más, quiero llamar su atención sobre el hecho de que el ejemplo funciona sin JavaScript. Y es mucho más inclusivo que el diseño tradicional en el <div> .