El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El menú de IU semántica es un grupo de elementos que muestra diferentes acciones de navegación. Podemos navegar a diferentes páginas del sitio web. Un menú puede ser una combinación de enlaces, una barra de búsqueda y menús desplegables.
El contenido de búsqueda del menú de la interfaz de usuario semántica se utiliza para colocar una barra de búsqueda dentro del menú. Podemos colocar una barra de búsqueda dentro del menú como un solo elemento.
Clases de contenido de búsqueda de menú de interfaz de usuario semántica:
- búsqueda : el elemento con esta clase puede contener un elemento de entrada y el elemento tiene el formato de una barra de búsqueda.
Sintaxis : agregue un elemento con clase de búsqueda al menú de la siguiente manera:
<div class="ui menu">
<div class="ui search item">
...
</div>
</div>
Ejemplo : en el siguiente ejemplo, tenemos un elemento de la barra de búsqueda dentro del menú.
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> <center> <div class="ui container"> <div class="ui header green"> <h1> GeeksforGeeks </h1> </div> <strong> Semantic UI Menu Search Content </strong> <br/><br/> <div class="ui menu"> <div class="ui search item"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Find Tutorials ..."/> <i class="search link icon"></i> </div> </div> </div> </div> </center> </body> </html>
Producción
Contenido de búsqueda de menú de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#search
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA