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 mensaje de selección de menú. Select Menu Message usa la clase SelectMenu-message para mostrar varios mensajes al usuario.
Primer CSS Seleccione la clase de mensaje del menú:
- SelectMenu-message: esta clase se utiliza para mostrar cualquier mensaje al usuario final.
Sintaxis:
<details class="details-reset details-overlay" open>
<summary class="btn" aria-haspopup="true">
...
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list">
<div class="SelectMenu-message
color-bg-success color-fg-success ||
color-bg-danger color-fg-danger">
...
</div>
<button class="SelectMenu-item"
role="menuitem">
...
</button>
...Select Menu
</div>
</div>
</div>
</details>
Ejemplo 1: Este ejemplo demuestra el uso del mensaje de menú de selección de Primer CSS con un mensaje de error.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu message </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 message </h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select any course to continue. </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <div class="SelectMenu-message color-bg-danger color-fg-danger"> OOP's! something went wrong. </div> <button class="SelectMenu-item" role="menuitem"> DSA </button> <button class="SelectMenu-item" role="menuitem"> DBMS </button> <button class="SelectMenu-item" role="menuitem"> Operating System </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer mensaje de menú de selección de CSS
Ejemplo 2: Este ejemplo demuestra el uso del mensaje de menú de selección de Primer CSS con un mensaje de éxito.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Select Menu message </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 message </h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Select any course to continue. </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <div class="SelectMenu-list"> <div class="SelectMenu-message color-bg-success color-fg-success"> Well done! </div> <button class="SelectMenu-item" role="menuitem"> DSA </button> <button class="SelectMenu-item" role="menuitem"> DBMS </button> <button class="SelectMenu-item" role="menuitem"> Operating System </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer mensaje de menú de selección de CSS
Referencia: https://primer.style/css/components/select-menu#message
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA