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 el contenido de la etiqueta.
El contenido de la etiqueta desplegable de la interfaz de usuario semántica se usa para crear un menú desplegable que contiene una etiqueta.
Sintaxis:
<div class="ui labeled Description dropdown button">
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
</div>
El siguiente ejemplo ilustra el contenido de la etiqueta desplegable de la interfaz de usuario semántica :
Ejemplo 1:
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>
<center>
<div class="ui container">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Semantic-UI Dropdown Label Content</h3>
<div class="ui floating labeled icon dropdown button">
<span class="text">Color</span>
<div class="menu">
<div class="item">
<div class="ui red empty circular label"></div>
Danger or Warning
</div>
</div>
</div>
</div>
<script>
$(".ui.dropdown").dropdown();
</script>
</center>
</body>
</html>
Producción:
Contenido de etiqueta desplegable de interfaz de usuario semántica
Ejemplo-2:
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>
<center>
<div class="ui container">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Semantic-UI Dropdown Label Content</h3>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Colors Name</span>
<div class="menu">
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" name="search"
placeholder="Search the color"/>
</div>
<div class="item">
<div class="ui red empty circular label"></div>
Red color
</div>
<div class="item">
<div class="ui green empty circular label"></div>
Green color
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Black color
</div>
</div>
</div>
</div>
<script>
$(".ui.dropdown").dropdown();
</script>
</center>
</body>
</html>
Producción:
Contenido de etiqueta desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#label
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