Primer CSS es un marco CSS gratuito de código abierto que se basa en un sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Las clases de detalles de CSS de Primer se crean para mejorar el comportamiento del componente predeterminado de detalles de HTML.
Primer CSS Detalles Clases:
- Área de clic de pantalla completa : la clase .details-overlay se usa para agregar a la etiqueta <detalles> para expandir el área de clic a toda la página. Esto significa que el usuario puede hacer clic en cualquier parte de la página para cerrar la etiqueta de detalles abierta.
- Área de clic de pantalla completa oscurecida : la clase .details-overlay-dark se usa para agregar a la etiqueta <detalles> para oscurecer su fondo.
- Símbolo de intercalación personalizado: la clase .details-reset cuando se agrega a la etiqueta <detalles>, elimina el símbolo de intercalación predeterminado colocado a la izquierda de los detalles. Luego podemos agregar nuestro símbolo de intercalación personalizado después de usar esta clase a la etiqueta <detalles>.
- Uso de estilos de botones con el elemento de resumen de detalles: la clase .dropdown-caret se usa para agregar un icono de intercalación desplegable a <detalles>.
Sintaxis:
<details class="DetailsClass">
<summary class="..">..</summary>
</details>
Ejemplo 1: En este ejemplo, hemos creado un detalle simple con un icono de intercalación desplegable en el resumen.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <title>Primer CSS Details</title> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Primer CSS Details</h3> <div class="m-2"> <details class="details-overlay"> <summary class="btn btn-primary"> Click Me <span class="dropdown-caret"></span> </summary> <div class="border p-3 mt-2"> This is the sample text that will be shown when the "Click Me" text is clicked. </div> </details> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, hemos creado un detalle con una superposición oscura. Significa que cada vez que hacemos clic, el fondo se oscurece.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <title>Primer CSS Details</title> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Primer CSS Details</h3> <div class="m-2"> <details class="details-overlay details-overlay-dark"> <summary class="btn btn-primary"> Click Me</summary> <div class="border p-3 mt-2"> This is the sample text that will be shown when the "Click Me" text is clicked. </div> </details> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/details
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA