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 diferentes clases integradas para los menús desplegables que son muy útiles al crear las barras de navegación en los sitios web. En este artículo, veamos el menú desplegable de tipos de selección de búsqueda. Un tipo de menú desplegable de selección de búsqueda ayuda al usuario a buscar en una gran lista de opciones.
Clases de tipo de selección de búsqueda desplegable de IU semántica:
- selección de búsqueda: esta clase nos permite buscar una opción de la lista desplegable de selección. La clase de selección no es necesaria si estamos utilizando una etiqueta HTML seleccionada; de lo contrario, es necesario mencionarla como clase.
Sintaxis:
<div class="ui ...search selection dropdown">
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
O:
<select class="ui search dropdown"> <option value="">....</option> .... </select>
Ejemplo 1: el siguiente código demuestra el tipo de selección de búsqueda desplegable .
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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
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 Selection Dropdown Type</strong>
<br/>
<br/>
<select class="ui search selection dropdown">
<option value="">Select Languages</option>
<option value="C">C</option>
<option value="CPP">C++</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="C#">C#</option>
<option value="JS">JavaScript</option>
</select>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipo de selección de búsqueda desplegable de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el menú desplegable de búsqueda al establecer algunos atributos de datos.
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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
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 Selection Dropdown Type</strong>
<br />
<br />
<div class="ui search selection dropdown">
<input type="hidden" name="colours">
<i class="dropdown icon"></i>
<div class="default text">Choose Colour</div>
<div class="menu">
<div class="item" data-value="b">Blue</div>
<div class="item" data-value="blk">Black</div>
<div class="item" data-value="wht">White</div>
<div class="item" data-value="br">Brown</div>
<div class="item" data-value="Vi">Violet</div>
<div class="item" data-value="r">Red</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
Producción:
Tipo de selección de búsqueda desplegable de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/dropdown.html#search-selection
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA