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. En este artículo veamos los botones de tipo básico.
Semantic-UI Search Dropdown Type proporciona diferentes clases integradas para los menús desplegables que son muy útiles al hacer que las barras de navegación en los sitios web también fueran muy útiles en los formularios que pueden tener múltiples opciones. En este artículo, veremos sobre el menú desplegable del tipo de búsqueda.
El menú desplegable de búsqueda nos permite buscar una opción.
Clases de tipo de búsqueda desplegable de IU semántica:
- menú desplegable: esta clase indica que se necesita un menú desplegable.
- search: Esta clase nos permite buscar una opción en el menú desplegable.
Sintaxis:
<div class="ui ...search dropdown">
...
</div>
Ejemplo 1: El siguiente código demuestra el tipo desplegable 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"
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 Dropdown Type</strong>
<br />
<br />
<div class="ui dropdown labeled search icon button">
<input type="hidden" name="webdev">
<i class="search icon"></i>
<div class="default text">COURSES AVAILABLE</div>
<div class="menu">
<div class="item" data-value="0">
WEB-DEVELOPMENT
</div>
<div class="item" data-value="1">
ANDROID-DEVELOPMENT
</div>
<div class="item" data-value="2">
MACHINE LEARNING
</div>
<div class="item" data-value="3">
DATA STRUCTURES AND ALGORITHMS
</div>
<div class="item" data-value="4">
COMPETITIVE PROGRAMMING
</div>
<div class="item" data-value="5">
MATHEMATICS
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el tipo desplegable 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"
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 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:
Referencia: https://semantic-ui.com/modules/dropdown.html#dropdown
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA