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 Filter.
El filtro Primer CSS se utiliza para buscar cualquier elemento de la lista de elementos del menú cuando la lista se vuelve muy larga. Utiliza la clase de filtro SelectMenu para agregar un elemento de filtro.
Primera clase de filtro CSS:
- SelectMenu-filter: esta clase se utiliza para agregar un campo de entrada de filtro al elemento.
Sintaxis:
<form class="SelectMenu-filter">
<input class="SelectMenu-input
form-control" type="....">
</form>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Filter.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Filter</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 Filter</h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any course </summary> <div class="SelectMenu SelectMenu--hasFilter"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks Courses </h3> </header> <form class="SelectMenu-filter"> <input class="SelectMenu-input form-control" type="text"> </form> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> DSA Self-Paced </button> <button class="SelectMenu-item" role="menuitem"> Complete Interview Preparation </button> <button class="SelectMenu-item" role="menuitem"> C++ STL </button> <button class="SelectMenu-item" role="menuitem"> Fork Python </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer filtro CSS
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Filter.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Filter</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 Filter</h3> <details class="details-reset details-overlay" open> <summary class="btn" aria-haspopup="true"> Choose any events </summary> <div class="SelectMenu SelectMenu--hasFilter"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks events </h3> </header> <form class="SelectMenu-filter"> <input class="SelectMenu-input form-control" type="text"> </form> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> Interview Series #46 </button> <button class="SelectMenu-item" role="menuitem"> Job-A-Thon 8: Hiring Challenge </button> <button class="SelectMenu-item" role="menuitem"> Get Hired with GeeksforGeeks at SuperK </button> <button class="SelectMenu-item" role="menuitem"> Bi-Wizard School Coding Tournament 4.0 </button> </div> </div> </div> </details> </div> </body> </html>
Producción:
Primer filtro CSS
Referencia: https://primer.style/css/components/select-menu#filter
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA