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 todos los estados del menú desplegable.
Estados desplegables de la interfaz de usuario semántica:
- Cargando : Esto se usa para crear un menú desplegable que muestra que sus datos se están cargando actualmente.
- Error : Esto se usa para especificar el error en el menú desplegable.
- Activo : Esto se usa para crear un menú desplegable activo que tiene su menú abierto.
- Deshabilitado : Esto se usa para especificar que el usuario no puede acceder al menú desplegable.
Sintaxis:
<div class="ui Dropdown-States dropdown.">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
.......
</div>
</div>
Ejemplo 1: el siguiente ejemplo demuestra el uso de la clase de estados de carga desplegable de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Loading State</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>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Loading State</h3>
<div class="ui loading dropdown">
Company <i class="dropdown icon"></i>
<div class="menu">
<div class="item">GFG</div>
<div class="item">gfg</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Estados desplegables de interfaz de usuario semántica
Ejemplo 2: el siguiente ejemplo demuestra el uso de la clase de estados de error 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>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown error State</p>
</b>
<hr><br/>
<strong>Dropdown with error option:</strong>
<br/><br/>
<div class="ui error dropdown">
Error Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Error option 1</div>
<div class="item">Error option 2</div>
<div class="item">Error option 3</div>
<div class="item">Error option 4</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Estados desplegables de interfaz de usuario semántica
Ejemplo 3: el siguiente ejemplo demuestra el uso de la clase de estados activos desplegables de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Active State</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 Active State</h3>
<div class="ui simple active dropdown">
Options <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>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Estados desplegables de interfaz de usuario semántica
Ejemplo 4: el siguiente ejemplo demuestra el uso de la clase de estados deshabilitados del menú desplegable de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Disabled State</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 Disabled State</h3>
<div class="ui disabled dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Item-A</div>
<div class="item">Item-B</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Estados desplegables de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA