Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Semantic UI Search es un módulo con la ayuda del cual el usuario puede buscar datos específicos de una colección de datos. Es un componente esencial de cualquier sitio web, ya que ayuda al usuario a obtener el resultado de manera eficiente.
Hay momentos en que el usuario quiere datos de una categoría específica. Por ejemplo, deportes, pájaros, informática, etc. La interfaz de usuario semántica nos proporciona una clase de tipo de categoría de búsqueda que muestra el contenido con respecto a las categorías.
Clase de tipo de categoría de búsqueda de interfaz de usuario semántica:
- categoría: Es un tipo de búsqueda que se utiliza para mostrar el resultado con respecto a las categorías de contenido.
Sintaxis:
<div class="ui category search"> ... </div>
Ejemplo 1: En el siguiente programa, crearemos una categoría de búsqueda para un «Número de identificación único».
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Search Category Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Search Category </div> <br> <div class="ui category search"> <!--Search Category--> <div class="ui icon input"> <input class="prompt" type="number" placeholder="Search Unique ID No."> <i class="search icon"></i> </div> <div class="results"></div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente programa, crearemos una categoría de búsqueda para «nombre del estudiante».
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Search Category Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Search Category </div> <br> <div class="ui category search"> <!--Search Category--> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search Student Name"> <i class="search icon"></i> </div> <div class="results"></div> </div> </body> </html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/search.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA