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 el menú Seleccionar sin bordes. Select Menu Borderless utiliza la clase SelectMenu-list-borderless para eliminar los bordes entre los diferentes elementos de la lista.
Primer CSS Clase sin bordes:
- SelectMenu-list–borderless: esta clase se usa para eliminar bordes entre diferentes elementos de la lista.
Sintaxis:
<details class="details-reset details-overlay">
<summary class="btn" aria-haspopup="true">
...
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list SelectMenu-list--borderless">
<button class="SelectMenu-item" role="menuitem">...</button>
...
</div>
</div>
</div>
</details>
Ejemplo 1: El siguiente ejemplo ilustra el uso de Primer CSS Borderless usando la clase SelectMenu-list-borderless .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu Borderless </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <div class="mt-5"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Select Menu Borderless </h3> <details class="details-reset details-overlay mt-3"> <summary class="btn" aria-haspopup="true"> Choose any course </summary> <div class="SelectMenu "> <div class="SelectMenu-modal"> <div class="SelectMenu-list SelectMenu-list--borderless"> <button class="SelectMenu-item" role="menuitem"> DSA </button> <button class="SelectMenu-item" role="menuitem"> Operating System </button> <button class="SelectMenu-item" role="menuitem"> DBMS </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Seleccionar menú sin bordes
Ejemplo 2: El siguiente ejemplo ilustra el uso de Primer CSS Borderless sin usar la clase SelectMenu-list–borderless .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu Borderless </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin-inline: 10rem;"> <div class="mt-5"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Select Menu Borderless </h3> <details class="details-reset details-overlay mt-3"> <summary class="btn" aria-haspopup="true"> Choose any course </summary> <div class="SelectMenu "> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> DSA </button> <button class="SelectMenu-item" role="menuitem"> Operating System </button> <button class="SelectMenu-item" role="menuitem"> DBMS </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Seleccionar menú sin bordes
Referencia: https://primer.style/css/components/select-menu#borderless
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA