Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La interfaz de usuario semántica proporciona clases para la barra de búsqueda que permite a los usuarios buscar una consulta en la barra de búsqueda. En este artículo, veamos las diferentes variaciones de búsqueda en la interfaz de usuario semántica.
Variaciones de búsqueda de IU semántica:
- Deshabilitado: Esto deshabilita la barra de búsqueda para evitar que los usuarios busquen.
- Fluido : esto permite que los resultados de la barra de búsqueda se expandan junto con el contenedor.
- Alineado: esto permite que los resultados de la barra de búsqueda se alineen hacia la izquierda o hacia la derecha.
Sintaxis:
<div class="ui Search-Variations category search">
<div class="ui icon input">
....
</div>
<div class="results"></div>
</div>
Ejemplo 1: el siguiente código demuestra la variación de búsqueda deshabilitada .
HTML
<!DOCTYPE html>
<html>
<head>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic UI Search variations </strong>
<br /><br />
<div class="ui disabled search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text"
placeholder="Search Courses...">
</div>
<div class="results"></div>
</div>
</center>
<script>
var content = [
{
title: ' Bootstrap',
url: 'https://www.geeksforgeeks.org/bootstrap-tutorials/',
description:
' Bootstrap is the most popular CSS framework in the world '
},
{
title: 'Foundation ',
url: 'https://www.geeksforgeeks.org/foundation/',
description:
'Foundation is another superb most widely used CSS ' +
' framework in the world. It is used by many companies'
+ ' such as Facebook, eBay, Mozilla, Adobe,' +
' and even Disney'
},
{
title: 'Bulma',
url: 'https://www.geeksforgeeks.org/bulma/',
description:
'This free and open-source CSS framework is '
+ 'based on the Flexbox layout model'
},
{
title: 'Pure',
url: 'https://www.geeksforgeeks.org/pure/',
description:
'Pure is a lightweight and responsive CSS framework'
}
]
;
$('.ui.search').search({
source: content,
fullTextSearch: false
})
</script>
</body>
</html>
Producción:
Variaciones de búsqueda de IU semántica
Ejemplo 2: El siguiente código demuestra la variación del fluido de búsqueda .
HTML
<!DOCTYPE html>
<html>
<head>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic-UI Search Variations </strong>
<br />
<br />
<div class="ui fluid search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text"
placeholder="Search Courses...">
</div>
<div class="results"></div>
</div>
</center>
<script>
var content = [
{
title: 'Foundation ',
url: 'https://www.geeksforgeeks.org/foundation/',
description: 'Foundation is another superb most' +
' widely used CSS framework in the world.' +
'It is used by many companies such as Facebook' +
', eBay, Mozilla, Adobe, and even Disney'
},
{
title: 'Bulma',
url: 'https://www.geeksforgeeks.org/bulma/',
description: 'This free and open-source CSS framework' +
'is based on the Flexbox layout model'
},
{
title: 'Pure',
url: 'https://www.geeksforgeeks.org/pure/',
description:
'Pure is a lightweight and responsive CSS framework'
},
{
title: 'Semantic UI',
url: 'https://www.geeksforgeeks.org/semantic-ui/',
description:
'This framework is popularly known for its incredible' +
'thematic effects as well as it’s simple and elegant designs'
},
];
$('.ui.search').search({
source: content,
fullTextSearch: false,
searchFields: [
'title'
],
})
</script>
</body>
</html>
Producción:
Variaciones de búsqueda de IU semántica
Ejemplo 3: El siguiente código demuestra la variación de clase alineada con la búsqueda.
HTML
<!DOCTYPE html>
<html>
<head>
<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"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic-UI Search Variations </strong>
<br/>
<br/>
<div class=" ui container">
<div class="ui left aligned category search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text"
placeholder="Search Courses...">
</div>
<div class="results"></div>
</div>
</div>
</center>
<script>
var content = [
{
title: 'Foundation ',
url: 'https://www.geeksforgeeks.org/foundation/',
description: 'Foundation is another superb most' +
' widely used CSS framework in the world.'+
'It is used by many companies such as Facebook' +
', eBay, Mozilla, Adobe, and even Disney'
},
{
title: 'Bulma',
url: 'https://www.geeksforgeeks.org/bulma/',
description: 'This free and open-source CSS framework' +
'is based on the Flexbox layout model'
},
{
title: 'Pure',
url: 'https://www.geeksforgeeks.org/pure/',
description:
'Pure is a lightweight and responsive CSS framework'
},
{
title: 'Semantic UI',
url: 'https://www.geeksforgeeks.org/semantic-ui/',
description: 'This framework is popularly known for '
+ 'its incredible thematic effects as well as '
+ 'it’s simple and elegant designs'
},
]
;
$('.ui.search').search({
source: content,
fullTextSearch: false,
searchFields: [
'title'
],
})
</script>
</body>
</html>
Producción:
Variaciones de búsqueda de IU semántica
Referencia: https://semantic-ui.com/modules/search.html
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA