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 estado de carga .
El estado de carga del menú desplegable de interfaz de usuario semántica se usa para crear un menú desplegable que muestra que sus datos se están cargando actualmente.
Clase de estado de carga desplegable de interfaz de usuario semántica:
- cargando: esta clase se usa para crear un menú desplegable que muestra que sus datos se están cargando actualmente.
Sintaxis:
<div class="ui loading dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
...
</div>
</div>
El siguiente ejemplo ilustra el estado de carga desplegable de la interfaz de usuario semántica :
Ejemplo 1:
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:
Ejemplo 2:
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 fluid multiple
search selection dropdown">
<input type="hidden"
name="country"
value="kp">
<i class="dropdown icon"></i>
<input class="search">
<div class="default text">
Search company name...
</div>
<div class="menu">
<div class="item">GeeksforGeeks</div>
<div class="item">Amazon</div>
<div class="item">Apple</div>
<div class="item">Flipkart</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dropdown.html#loading
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