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. La variación básica del segmento de IU semántica no tiene formato y aparece sin bordes. El segmento solo tiene relleno alrededor y nada más.
Clase de variación básica del segmento semántico de la interfaz de usuario:
- básico: esta clase se usa para crear un segmento que no tiene un formato especial aparte del relleno a su alrededor.
Sintaxis: agregue la clase básica al segmento de la siguiente manera:
<div class="ui basic segment">
...
</div>
Ejemplo: En el siguiente ejemplo, tenemos tres segmentos básicos y un botón que alterna la variación básica.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 Basic Variation
</strong>
<br />
<br />
<button class="ui inverted green button"
onclick="toggleBasicVariation()">
Toggle Basic Variation
</button>
</center>
<div class="ui basic 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 basic 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 basic 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 toggleBasicVariation = () => {
$('.ui.segment').toggleClass('basic')
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/segment.html#basic
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA