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 el estado seleccionado de Primer CSS.
El estado seleccionado se utiliza para indicar que se ha seleccionado el elemento del menú de selección y se muestra con un icono de verificación cuando se establece el atributo aria-checked=”true” .
Primer CSS Clases de estado seleccionadas:
- SelectMenu-icon: esta clase se utiliza para definir cualquier icono de menú de selección.
- SelectMenu-icon–check: esta clase se utiliza para indicar un icono de verificación cuando se establece el atributo aria-checked=”true” .
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">
<button class="SelectMenu-item"
aria-checked="true">
<svg class="SelectMenu-icon
SelectMenu-icon--check
octicon octicon-check" width="..." height="..."
viewBox="..."><path d="..."/>
</svg>
...
</button>
</div>
</div>
</div>
</details>
Ejemplo 1: Este ejemplo demuestra el uso del estado seleccionado del menú de selección en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Selected state</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 Selected state</h3> <details class="details-reset details-overlay mt-3"> <summary class="btn" aria-haspopup="true"> Choose any course from GeeksforGeeks </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <button class="SelectMenu-item" aria-checked="true"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Data Structure </button> <button class="SelectMenu-item"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Interview Preparation </button> <button class="SelectMenu-item"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> DBMS </button> <button class="SelectMenu-item" aria-checked="true"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Operating System </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Estado seleccionado
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Selected State.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Selected state</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 Selected state</h3> <details class="details-reset details-overlay mt-3"> <summary class="btn" aria-haspopup="true"> Choose any event at GeeksforGeeks </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <button class="SelectMenu-item"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Get Hired with GeeksforGeeks at SuperK </button> <button class="SelectMenu-item"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Interview Series #46 </button> <button class="SelectMenu-item" aria-checked="true"> <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" /> </svg> Interview Series #46 </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer CSS Estado seleccionado
Referencia: https://primer.style/css/components/select-menu#selected-state
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA