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 alineada de búsqueda de IU semántica establece la dirección de los resultados donde se mostrarán. Los resultados pueden mostrarse a la izquierda de forma predeterminada o en la dirección derecha.
Clases de variación alineadas de búsqueda de IU semántica:
- alineado a la izquierda: los resultados de la búsqueda se muestran en la dirección izquierda.
- alineado a la derecha: los resultados de la búsqueda se muestran en la dirección correcta.
Sintaxis: agregue una clase alineada a la izquierda o a la derecha al elemento de búsqueda para cambiar la dirección de los resultados de búsqueda de la siguiente manera:
<div class="ui right aligned search">
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos un botón para cambiar la dirección de los resultados de búsqueda usando la variación de alineación.
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 Aligned Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<button class="ui button" onclick="changeAlignment()">
Change Alignment
</button>
<div class="ui right aligned 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>
const changeAlignment = () => {
$('.ui.search').toggleClass('left aligned')
.toggleClass('right aligned')
}
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:
Referencia: https://semantic-ui.com/modules/search.html#aligned
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA