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 segmento que 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 IU semántica se utiliza para apilar un grupo de segmentos uno encima de otro. Los segmentos parecen estar apilados uno encima del otro.
Clases de grupo de segmentos apilados de interfaz de usuario semántica:
- segmentos apilados : el contenedor con esta clase puede contener segmentos que parecen estar apilados de arriba a abajo.
Sintaxis : cree un contenedor con la clase de segmentos apilados y coloque los segmentos del contenedor dentro de él de la siguiente manera:
<div class="ui stacked segments">
<div class="ui segment">
...
</div>
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos una lista de segmentos que se apilan uno sobre otro utilizando los 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"/>
<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>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Stacked Segments Group
</strong>
</center>
<div class="ui stacked 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#stacked-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