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 tipo de segmento apilado de IU semántica se utiliza para mostrar el segmento apilado. El segmento tiene un tipo especial de formato con bordes que aparecen apilados.
Clase de tipo apilado de segmento de interfaz de usuario semántica:
- apilado : agregue la clase al segmento y aparecerá como apilado.
Sintaxis : agregue la clase apilada al segmento de la siguiente manera:
<div class="ui piled segment">
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos tres segmentos de tipo apilado.
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>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Segment Piled Type
</strong>
<br />
<br />
<button
class="ui inverted green button"
onclick="togglePiledVariation()"
>
Toggle Piled Type
</button>
</center>
<div class="ui piled 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 piled 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 piled 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>
<script>
const togglePiledVariation = () => {
$('.ui.segment').toggleClass('piled')
}
</script>
</body>
</html>
Producción
Tipo apilado de segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#piled
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA