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. Utiliza una clase para agregar CSS a los elementos.
La barra de búsqueda nos permite buscar contenido en un sitio web. Es una parte esencial de un sitio web, lo que aumenta la facilidad de encontrar el artículo deseado. La interfaz de usuario semántica nos proporciona una barra de búsqueda con estilo. Echemos un vistazo a los estados de búsqueda de la interfaz de usuario semántica .
Estados de búsqueda de interfaz de usuario semántica:
- cargando : una barra de búsqueda se puede mantener en estado de carga hasta que los resultados de la búsqueda se obtengan de una fuente externa o del contenido local.
Clase de carga de IU semántica:
- cargando : esta clase mantiene la barra de búsqueda en un estado de carga.
Sintaxis:
<div class="ui loading search">
<div class="ui icon input">
<input type="text">
<i class="search icon"></i>
</div>
</div>
Ejemplo 1: En el siguiente ejemplo, hemos creado una barra de búsqueda con estado de carga .
HTML
<!DOCTYPE html> <html> <head> <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 dimmed pusher container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Search States</h4> <hr> <br /> <div class="ui loading search"> <div class="ui icon input"> <input type="text" placeholder="Find in GeeksforGeeks"> <i class="search icon"></i> </div> </div> </div> </body> </html>
Producción:
Barra de búsqueda con estado de carga
Ejemplo 2: en el siguiente ejemplo, hemos creado una búsqueda deshabilitada con estado de carga
HTML
<!DOCTYPE html> <html> <head> <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 dimmed pusher container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Search States</h4> <hr> <br /> <div class="ui loading disabled search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Find in GeeksforGeeks"> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> </body> </html>
Producción:
Búsqueda deshabilitada con estado de carga
Referencia: https://semantic-ui.com/modules/search.html#loading