Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
El menú desplegable de la interfaz de usuario semántica permite al usuario seleccionar un valor de una serie de opciones. Semantic-UI Dropdown nos ofrece 11 tipos de menú desplegable y 3 tipos de encabezado de contenido, divisor e icono. En este artículo, aprenderemos sobre los tipos de selección de búsqueda múltiple.
El tipo de selección de búsqueda múltiple desplegable de interfaz de usuario semántica se utiliza para crear un menú desplegable de selección que permite selecciones de búsqueda múltiple.
Clase de tipo de selección de búsqueda múltiple desplegable de interfaz de usuario semántica: no hay una clase predefinida para la selección de búsqueda múltiple. Pero para eso, podemos usar un atributo multiple=””,
sin valor
Sintaxis:
<select class="ui fluid search dropdown" multiple=""> <option value="">..</option> <option value="">..</option> .. </select>
Ejemplo: El siguiente ejemplo ilustra el tipo de selección de búsqueda múltiple desplegable de interfaz de usuario semántica .
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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Multiple Search Selection Type</h3>
<select class="ui fluid search dropdown" multiple="">
<option value="">Company Name</option>
<option value="AL">GeeksforGeeks</option>
<option value="AK">Apple</option>
<option value="AZ">Amazon</option>
</select>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Tipo de selección de búsqueda múltiple desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#multiple-search-selection
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA