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ús desplegables y 3 tipos de encabezado de contenido, divisor e icono. En este artículo, aprenderemos sobre el contenido de Divider.
El contenido del divisor desplegable de la interfaz de usuario semántica se usa para crear un menú desplegable que contiene divisores para separar el contenido relacionado.
Clase de contenido del divisor desplegable de la interfaz de usuario semántica:
- divisor: esta clase se utiliza para separar contenido relacionado.
Sintaxis:
<div class="ui labeled Divider dropdown button">
<div class="divider"></div>
<div class="item">
...
</div>
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra el contenido del divisor 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"></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 Divider Content</h3>
<div class="ui floating labeled icon dropdown button">
<span class="text">Company Name</span>
<div class="menu">
<div class="divider"></div>
<div class="item">GeeksforGeeks</div>
<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: El siguiente código también demuestra la clase divisor .
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 Divider Content</h3>
<div class="ui floating labeled icon dropdown button">
<i class="add user icon"></i>
<span class="text">Add user</span>
<div class="menu">
<div class="item">Ram</div>
<div class="item">Shyam</div>
<div class="divider"></div>
<div class="item">Geeta</div>
<div class="item">Seeta</div>
</div>
</div>
</div>
<script>
$(".ui.dropdown").dropdown();
</script>
</center>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dropdown.html#divider
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