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.
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 el componente desplegable . El menú desplegable se utiliza para mostrar diferentes opciones a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes variaciones, estados y diferentes representaciones de contenido de los menús desplegables.
- Tipos de menús desplegables de interfaz de usuario semántica : hay diferentes tipos de menús desplegables según la dirección del menú y la forma en que se muestra. Los usuarios pueden seleccionar entre ellos según su elección.
- Contenido desplegable de la interfaz de usuario semántica: el menú desplegable de la interfaz de usuario semántica nos ofrece 8 tipos de contenido. Tenemos un artículo separado para eso.
- Estados desplegables de la interfaz de usuario semántica : Hay 4 estados diferentes disponibles Cargando, Error, Activo y Deshabilitado
- Variaciones del menú desplegable de la interfaz de usuario semántica : Hay 4 variaciones diferentes disponibles. Desplazamiento: estas variaciones permiten que el menú desplegable sea desplazable, compacto, fluido y de dirección de menú.
Sintaxis:
<div class="ui dropdown">
...
<i class="dropdown icon"></i>
<div class="menu">
...
</div>
</div>
El siguiente ejemplo ilustra diferentes tipos, variaciones de menús desplegables:
Ejemplo 1: tipo en línea desplegable de IU 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>
<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> Please tell us your favourite Operating System
<i class="desktop icon"></i>
<div class="ui inline dropdown">
<span class="text">Choose here</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
Windows
</div>
<div class="item">
Linux
</div>
<div class="item">
Android
</div>
<div class="item">
Mac OS
</div>
<div class="item">
iOS
</div>
</div>
</div>
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Tipo en línea desplegable de IU semántica
Ejemplo 2: tipo de puntero desplegable de IU 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>
<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:
Tipo de puntero desplegable de IU semántica
Ejemplo 3: Variación desplegable dirigida por el menú de la 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>
<div class="ui container">
<br />
<h2 class="ui header green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Menu Direction
Dropdown Variation</p>
</b>
<br /><br />
<div style="margin-left: 240px;">
<div class="ui floating labeled
icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Content</span>
<div class="right menu">
<div class="item">Courses
<i class="dropdown icon"></i>
<div class="right menu">
<div class="item">React</div>
<div class="item">Angular</div>
<div class="item">Vue</div>
</div>
</div>
<div class="item">Tests</div>
<div class="item">Articles</div>
</div>
</div>
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">Profile</span>
<div class="left menu">
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">
Security
</span>
<div class="left menu">
<div class="item">
Reset Password
</div>
<div class="item">
Log Out
</div>
</div>
</div>
<div class="item">
Change Photo
</div>
<div class="item">
Update Details
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Menú desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA