Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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 altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Details Custom Caret se usa para crear el símbolo de intercalación personalizado para mostrar la información oculta usando la clase de restablecimiento de detalles . Podemos añadir el icono desplegable a la derecha del texto. En este artículo, discutiremos Primer CSS Details Custom Caret.
Primer CSS Detalles Clases de intercalación personalizadas:
- detalles-restablecer: esta clase se usa para crear el símbolo de intercalación personalizado.
- dropdown-caret: esta clase se utiliza para crear el icono desplegable.
Sintaxis:
<details class="details-reset">
<summary class="btn">
...
</summary>
<div class="border p-3 mt-2">
...
</div>
</details>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Details Custom Caret para mostrar el texto oculto .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Details Custom Caret </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Details Custom Caret </h3> <br> <details class="details-reset"> <summary class="btn"> Show </summary> <div class="border p-3 mt-2"> <h4> Welcome to GeeksforGeeks </h4> <p> A Computer Science portal for geeks. </p> </div> </details> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Details Custom Caret para mostrar la imagen oculta .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Details Custom Caret </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Details Custom Caret </h3> <br> <details class="details-reset"> <summary class="btn"> Show </summary> <div class="border p-3 mt-2"> <h4> GeeksforGeeks </h4> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </details> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/details#custom-caret
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA