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 tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Desplegable». Los menús desplegables se utilizan para mostrar diferentes opciones a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes tipos de menús desplegables según la dirección del menú y la forma en que se muestra. Veamos este tipo de desplegable.
Tipo desplegable de IU semántica:
- Desplegable: Esto indica que se necesita un menú desplegable.
- Selección : Esto establece el menú desplegable de solo tipo de selección.
- Selección de búsqueda : Esto 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.
- Selección múltiple : esto se usa para crear un menú desplegable de selección que puede permitir selecciones múltiples.
- Selección de búsqueda múltiple : Esto se usa para crear un menú desplegable de selección que permite selecciones de búsqueda múltiple.
- Menú desplegable de búsqueda : se utiliza para crear un menú desplegable de búsqueda.
- Buscar en el menú: Esto se usa para hacer un menú desplegable que incluye un indicador de búsqueda dentro de su menú.
- En línea : se utiliza para especificar el tipo de menú desplegable en línea.
- Apuntar : Esto se usa para hacer que el menú apunte en una dirección específica.
- Flotante : Esto se usa para hacer que un menú desplegable flote debajo de un elemento.
- Simple : Esto se usa para especificar el tipo simple de menú desplegable.
Sintaxis:
<div class="ui dropdown-type-class dropdown">
.......
</div>
Ejemplo 1: El siguiente ejemplo ilustra el tipo de menú desplegable de la interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Dropdown Types
</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 style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Dropdown Types
</h3><br>
<div class="ui dropdown">
<div class="text">
Data Structure
</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
Algorithms
</div>
<div class="item">
Gate
</div>
<div class="divider"></div>
<div class="item">
<i class="dropdown icon"></i>
Jobs
<div class="menu">
<div class="item">Apply for Jobs</div>
<div class="item">Post a Job</div>
</div>
</div>
<div class="item">
Write an Article
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo ilustra el tipo de selección desplegable de la 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"
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 Dropdown Selection Type</strong>
<br />
<br />
<div class="ui selection dropdown">
<input type="hidden" name="webdev">
<i class="dropdown icon"></i>
<div class="default text">WEB DEVELOPMENT COURSES</div>
<div class="menu">
<div class="item"
data-value="0">
HTML
</div>
<div class="item"
data-value="1">
CSS
</div>
<div class="item"
data-value="2">
JAVASCRIPT
</div>
<div class="item"
data-value="3">
FRONT-END
</div>
<div class="item"
data-value="4">
BACK-END
</div>
<div class="item"
data-value="5">
FULL STACK
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipos de selección desplegable de IU semántica
Ejemplo 3: El siguiente ejemplo ilustra el tipo de selección de búsqueda desplegable de la 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"
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:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 4: el siguiente ejemplo ilustra el tipo de selección múltiple desplegable de interfaz de usuario semántica .
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>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 5: 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>
<title>Semantic-UI Dropdown Types</title>
<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:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 6: El siguiente ejemplo ilustra el tipo de menú desplegable de búsqueda desplegable de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Types</title>
<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 floating dropdown labeled search icon button">
<i class="book icon"></i>
<span class="text">Select Course</span>
<div class="menu">
<div class="item">DSA</div>
<div class="item">OOP's</div>
<div class="item">DBMS</div>
<div class="item">OS</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 7: El siguiente ejemplo ilustra el tipo en línea desplegable de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Types</title>
<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>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown Inline Type</p>
</b>
<hr>
<br />
<strong>Inline Dropdown:</strong><br /><br />
<span> This is a
<div class="ui inline dropdown">
<span class="text">Dropdown</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
option 1
</div>
<div class="item">
option 2
</div>
<div class="item">
option 3
</div>
<div class="item">
option 4
</div>
<div class="item">
option 5
</div>
</div>
</div>
inline with text .
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 8: El siguiente ejemplo ilustra el tipo de puntero desplegable de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Types</title>
<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>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown Pointing Type</p>
</b>
<hr><br />
<strong> Choose your road and path:</strong>
<br /><br />
<center>
<div class="ui bottom pointing dropdown button">
<span class="text">North Road</span>
<div class="menu">
<div class="header">Bottom pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui right pointing dropdown button"
style="margin-right:65px;">
<span class="text">Right Road</span>
<div class="menu">
<div class="header">Right pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<div class="ui left pointing dropdown button" s
tyle="margin-left:65px;">
<span class="text">Left Road</span>
<div class="menu">
<div class="header">Left pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui top pointing dropdown button">
<span class="text">South Road</span>
<div class="menu">
<div class="header">Top pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 9: El siguiente ejemplo ilustra el tipo flotante desplegable de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Types</title>
<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 floating Type</strong>
<br/><br/>
<div class="ui green buttons">
<div class="ui button">Select</div>
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="envelope icon"></i>
Mail Us
</div>
<div class="item">
<i class="phone icon"></i>
Contac Us
</div>
</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Ejemplo 10: El siguiente ejemplo ilustra el tipo simple desplegable de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Dropdown Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Dropdown Simple Type</p> </b> <hr> <br /> <strong>Simple Dropdown:</strong> <br /><br /> <div class="ui compact menu"> <div class="ui simple dropdown item"> <i class="user circle icon"></i> Access <i class="dropdown icon"></i> <div class="menu"> <div class="item">Public</div> <div class="item">Private</div> <div class="item">Protected</div> </div> </div> </div> </div> </body> </html>
Producción:
Tipos desplegables de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#dropdown