Semantic-UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
El tipo estándar de búsqueda de interfaz de usuario semántica se utiliza para mostrar los campos de entrada de búsqueda que contienen el conjunto de resultados.
Clase de tipo estándar de búsqueda de interfaz de usuario semántica:
- search: Esta clase se utiliza para crear un cuadro de búsqueda de tipo estándar.
Sintaxis:
<div class="ui search">
...
</div>
Ejemplo 1: En este ejemplo, describiremos el tipo estándar de búsqueda de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Search Standard Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Search Standard Type</h3> <div class="ui search"> <input class="prompt" type="text" placeholder="Search..."> <div class="res"></div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos el tipo estándar de búsqueda de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Search Standard Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Search Standard Type</h3> <div class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search..."> <i class="search icon"></i> </div> <div class="res"></div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/modules/search.html#standard
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA