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.
La búsqueda de interfaz de usuario semántica se utiliza para permitir que el usuario busque diferentes cosas en el sitio web. La búsqueda puede ayudar a buscar blogs, herramientas, otros enlaces, etc. La variación del fluido de búsqueda de la interfaz de usuario semántica permite que los resultados de la búsqueda ocupen todo el ancho de su contenedor.
Clases de variación de fluido de búsqueda de interfaz de usuario semántica:
- fluid : Al agregar esta clase, los resultados de la búsqueda ocupan el ancho de su contenedor.
Sintaxis : agregue la opción fluida al elemento de búsqueda de la siguiente manera:
<div class="ui fluid search">
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos la búsqueda de tipo fluido.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<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>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Search Fluid Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<div class="ui fluid search">
<div class="ui icon input">
<input
class="prompt"
type="text"
placeholder="Search tutorials..."
/>
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script>
var tutorials = [
{ title: 'Data Structures' },
{ title: 'Algorithms' },
{ title: 'Machine Learning' },
{ title: 'Web Development' },
{ title: 'Competitive Programming' },
{ title: 'Java' },
{ title: 'C' },
{ title: 'C#' },
{ title: 'C++' },
]
$('.ui.search').search({
source: tutorials,
})
</script>
</body>
</html>
Producción:
Variación del fluido de búsqueda de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/search.html#fluid
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA