Semantic UI es un marco de código abierto que utiliza CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El menú desplegable de IU semántica se utiliza para seleccionar el valor de las opciones dadas. El tipo de menú desplegable de búsqueda desplegable de IU semántica se utiliza para crear el menú desplegable de solicitud de búsqueda para seleccionar valores únicos o múltiples de las opciones dadas.
Clase de tipo de menú de búsqueda desplegable de interfaz de usuario semántica:
- menú desplegable: esta clase se utiliza para crear el menú desplegable.
- flotante: esta clase se usa para seleccionar un solo valor del menú desplegable.
- múltiple: esta clase se usa para crear el menú desplegable para seleccionar múltiples valores.
Sintaxis:
<div class="ui Search-In-Menu-Type-Class dropdown"> ... </div>
Ejemplo 1: el siguiente código muestra el tipo de menú desplegable de búsqueda de interfaz de usuario semántica para seleccionar un solo valor.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI Dropdown Search In-Menu Type </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Dropdown Search In-Menu Type </h3>
<div class="ui floating dropdown labeled icon button">
<i class="add icon"></i>
<span class="text"> Select one </span>
<div class="menu">
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search...">
</div>
<div class="header">
Topics
</div>
<div class="scrolling menu">
<div class="item">
C++
</div>
<div class="item">
Java
</div>
<div class="item">
Python
</div>
<div class="item">
Flutter
</div>
<div class="item">
Javascript
</div>
</div>
</div>
</div>
</div><br>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipo de menú de búsqueda desplegable de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el tipo de menú desplegable de búsqueda de interfaz de usuario semántica para seleccionar varios valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI Dropdown Search In-Menu Type </title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Dropdown Search In-Menu Type </h3>
<div class="ui multiple dropdown">
<input type="hidden" name="filters">
<i class="add icon"></i>
<span class="text"> Select multiple </span>
<div class="menu">
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search...">
</div>
<div class="header">
Topics
</div>
<div class="scrolling menu">
<div class="item" data-value="c++">
<div class="ui green empty circular label"></div>
C++
</div>
<div class="item" data-value="java">
<div class="ui blue empty circular label"></div>
Java
</div>
<div class="item" data-value="python">
<div class="ui black empty circular label"></div>
Python
</div>
<div class="item" data-value="flutter">
<div class="ui purple empty circular label"></div>
Flutter
</div>
<div class="item" data-value="javascript">
<div class="ui red empty circular label"></div>
Javascript
</div>
</div>
</div>
</div>
</div> <br>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipo de menú de búsqueda desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#search-in-menu
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA