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 Autocompletar Sugerencia se usa para mostrar sugerencias cuando escribimos en el área de texto usando la clase .suggester . Para mostrar sugerencias, usaremos el elemento <text-expander> .
Primer CSS Clase de sugerencia de autocompletar:
- sugerente: esta clase se utiliza para dar sugerencias.
Sintaxis:
<div class="form-group position-relative">
<textarea class="form-control width-full"
placeholder="...">
...
</textarea>
<ul class="suggester suggester-container"
role="listbox">
....
</ul>
</div>
Ejemplo 1: Este ejemplo demuestra el Primer CSS Autocompletar Sugerencia.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Autocomplete Suggester </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Autocomplete Suggester </h3> <br> <div class="form-group position-relative"> <textarea class="form-control width-full" placeholder="Welcome to GeeksforGeeks"> I am expert in </textarea> <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 160px;"> <li> Java </li> <li> Python </li> </ul> </div> </div> </body> </html>
Producción:
Primer Sugerente de autocompletar CSS
Ejemplo 2: Este ejemplo demuestra el Primer CSS Autocompletar Sugerencia.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Autocomplete Suggester </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Autocomplete Suggester </h3> <br> <div class="form-group position-relative"> <textarea class="form-control width-full" placeholder="Welcome to GeeksforGeeks"> I am expert in </textarea> <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 160px;"> <li class="color-bg-accent-emphasis"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" > <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> Java </li> <li class="color-bg-done-emphasis"> Python </li> <li class="color-bg-severe"> C++ </li> </ul> </div> </div> </body> </html>
Producción:
Primer Sugerente de autocompletar CSS
Referencia: https://primer.style/css/components/autocomplete#sugester
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA