La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El segmento de interfaz de usuario semántica es un contenedor que se utiliza para colocar contenidos del mismo tipo o de la misma categoría. Se utiliza para agrupar elementos relacionados. El grupo de segmentos apilados de la interfaz de usuario semántica se utiliza para apilar una serie de segmentos. Los segmentos parecen estar apilados. Obtenemos los bordes y CSS de los elementos apilados usando esta clase.
Clase de grupo de segmentos apilados de interfaz de usuario semántica:
- segmentos apilados : el contenedor con esta clase puede contener segmentos que se apilan uno encima de otro con el CSS y los bordes alrededor de los segmentos.
Sintaxis : cree un contenedor con la clase de segmentos apilados y coloque los segmentos dentro de él de la siguiente manera:
<div class="ui piled segments">
<div class="ui segment">
...
</div>
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos tres segmentos agrupados como segmentos apilados.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1> GeeksforGeeks</h1>
</div>
<strong> Semantic UI Piled Segments Group </strong>
</center>
<div class="ui piled segments">
<div class="ui segment">
<h3>Data Structures</h3>
<ul class="ui bulleted list">
<li class="item">Stack</li>
<li class="item">Heap</li>
<li class="item">Array</li>
</ul>
</div>
<div class="ui segment">
<h3>Algorithms</h3>
<ul class="ui bulleted list">
<li class="item">Searching</li>
<li class="item">Sorting</li>
<li class="item">Graph</li>
</ul>
</div>
<div class="ui segment">
<h3>Programming Languages</h3>
<ul class="ui bulleted list">
<li class="item">Java</li>
<li class="item">C++</li>
<li class="item">Python</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Producción:
Grupo de segmentos apilados de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#piled-segments
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA