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. En este artículo, discutiremos Primer CSS Divider.
El divisor de menú de selección se usa para separar varias partes de los elementos de la lista de menú de selección mediante la adición de una clase de divisor de menú de selección .
Primer clase de divisor CSS:
- SelectMenu-divider: esta clase se usa para agregar un elemento divisor entre varias partes de los elementos de la lista del menú.
Sintaxis:
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">.......</h3>
</header>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Divider.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Divider</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Divider</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 Courses </h3> </header> <div class="SelectMenu-list"> <div class="SelectMenu-divider">Live Courses</div> <button class="SelectMenu-item" role="menuitem"> System Design </button> <button class="SelectMenu-item" role="menuitem"> Full Stack Live </button> <div class="SelectMenu-divider">Online Course</div> <button class="SelectMenu-item" role="menuitem"> DSA-Self Paced </button> <button class="SelectMenu-item" role="menuitem"> C++ STL </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Divisor
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Divider.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Divider</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Divider</h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any event </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks Events </h3> </header> <div class="SelectMenu-list"> <div class="SelectMenu-divider">Live events</div> <button class="SelectMenu-item" role="menuitem"> Problem of The Day </button> <button class="SelectMenu-item" role="menuitem"> Interview Series </button> <div class="SelectMenu-divider">Upcoming events</div> <button class="SelectMenu-item" role="menuitem"> Get Hired with GeeksforGeeks at SuperK </button> <button class="SelectMenu-item" role="menuitem"> Job-A-Thon 8: Hiring Challenge </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Divisor
Referencia: https://primer.style/css/components/select-menu#divider
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA