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.
Un menú desplegable de IU 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 el tipo de selección múltiple .
El tipo de selección múltiple desplegable de interfaz de usuario semántica se utiliza para crear un menú desplegable de selección que puede permitir selecciones múltiples. Usamos las clases desplegables fluidas de la interfaz de usuario para crear una selección normal y luego agregamos los atributos múltiples para permitir las selecciones múltiples.
Atributo de tipo de selección múltiple desplegable de interfaz de usuario semántica:
- múltiple: este atributo se usa para crear un menú desplegable de selección que puede permitir selecciones múltiples.
Sintaxis:
<select name="..." multiple="" class="ui dropdown">
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</select>
El siguiente ejemplo ilustra el tipo de selección múltiple desplegable de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Multiple Selection Type</h3>
<select multiple=""
class="ui fluid dropdown">
<option value="">
Company Name
</option>
<option value="GFG">
GeeksforGeeks
</option>
<option value="Amazon">
Amazon
</option>
<option value="Apple">
Apple
</option>
<option value="Flipkart">
Flipkart
</option>
</select>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Tipo de selección múltiple desplegable de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Multiple Selection Type</h3>
<select multiple="" c
lass="ui fluid dropdown">
<option value="">
Departments
</option>
<option value="HR">
HR
</option>
<option value="Sales">
Sales
</option>
<option value="Marketing">
Marketing
</option>
<option value="Dev">
Development
</option>
<option value="Testing">
Testing
</option>
<option value="Delivery">
Delivery
</option>
</select>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Tipo de selección múltiple desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#multiple-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