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 ofrece Select Menu que tiene una asistencia superior para el filtrado, la navegación, etc. En este artículo, discutiremos la pizarra en blanco del menú de selección. Select Menu Blankslate usa la clase SelectMenu-blankslate para agregar algo de contenido a la lista del menú.
Clase Primer CSS Blankslate:
- SelectMenu-blankslate: esta clase se usa para mostrar contenido de pizarra en blanco en la lista del menú.
Sintaxis:
<details class="details-reset details-overlay" open>
<summary class="btn" aria-haspopup="true">
...
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">......</h3>
</header>
<div class="SelectMenu-list">
<div class="SelectMenu-blankslate">
...
</div>
</div>
</div>
</div>
</details>
Ejemplo 1: a continuación se muestra el ejemplo que demuestra el uso de Primer CSS Select Menu Blankslate.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu blankslate </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <h1 class="color-fg-success mt-5"> GeeksforGeeks </h1> <h3> Primer CSS Select Menu blankslate </h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any course </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title">GeeksforGeeks</h3> </header> <div class="SelectMenu-list"> <div class="SelectMenu-blankslate"> <h4 class="my-2">No courses added yet!</h4> <button type="button" class="btn btn-sm btn-primary"> Click here to add any course. </button> </div> </div> </div> </div> </details> </body> </html>
Producción:
Primer CSS Blankslate
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de Primer CSS Select Menu Blankslate.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu blankslate </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <h1 class="color-fg-success mt-5"> GeeksforGeeks </h1> <h3> Primer CSS Select Menu blankslate </h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose tutorial to learn </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks-Tutorials </h3> </header> <div class="SelectMenu-list"> <div class="SelectMenu-blankslate"> <h4 class="my-2">No tutorial added yet!</h4> <button type="button" class="btn btn-sm btn-primary"> Click here to add tutorial. </button> </div> </div> </div> </div> </details> </body> </html>
Producción:
Primer CSS Blankslate
Referencia: https://primer.style/css/components/select-menu#blankslate
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA