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.
El menú de selección de Primer CSS es el componente que se puede usar para navegar, filtrar, etc. Los elementos de la lista del menú de selección de Primer CSS se usan para crear el menú con algunos elementos de la lista. Los elementos de la lista pueden ser texto con avatares, íconos, texto de varias líneas, etc. En este artículo, discutiremos los elementos de la lista del menú de selección de Primer CSS.
Primer CSS Seleccionar menú Elementos de la lista Clase:
- SelectMenu-item: esta clase se utiliza para crear el elemento de la lista.
Sintaxis:
<button class="SelectMenu-item" >
Content
</button>
Ejemplo 1: El siguiente ejemplo demuestra los Elementos de la lista del menú Seleccionar de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select menu List Items </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Select menu List Items </h3> <br> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any one </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> Languages </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" > Java </button> <button class="SelectMenu-item" > Python </button> <button class="SelectMenu-item" > C++ </button> </div> </div> </div> </details> </body> </html>
Producción:
Elementos de la lista del menú de selección de CSS básico
Ejemplo 2: El siguiente ejemplo muestra los Elementos de la lista del menú de selección de Primer CSS junto con los avatares y los íconos SVG .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select menu List Items </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Select menu List Items </h3> <br> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any one </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> Languages </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" > <img class="avatar avatar-small mr-2" height="20" width="20" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> Java </button> <button class="SelectMenu-item" > Python <svg class="octicon ml-2" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> </button> <button class="SelectMenu-item" > C++ <span class="Counter ml-1"> 5 </span> </button> </div> </div> </div> </details> </body> </html>
Producción:
Elementos de la lista del menú de selección de CSS básico
Referencia: https://primer.style/css/components/select-menu#list-items
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA