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.
Variaciones del segmento de la interfaz de usuario semántica:
- Invertido : Esto se usa para invertir el color del segmento para crear contraste.
- Adjunto : se utiliza para adjuntar un segmento a otro contenido en cualquier página.
- Padded : Esto se usa para dar relleno al segmento.
- Compacto : Sirve para generar un segmento que cubra tanto espacio como se necesite.
- Coloreado : Esto se usa para colorear un segmento.
- Énfasis : Esto se utiliza para hacer que un segmento sea más o menos enfatizado.
- Circular : Esto se usa para hacer un segmento circular.
- Borrado : Esto se utiliza para borrar el flotante de un segmento.
- Flotante : se utiliza para alinear un segmento a la izquierda o a la derecha del segmento.
- Alineación de texto : Esto se usa para alinear un texto del segmento en cualquier lado o centro.
- Básico : Esto se usa para crear un segmento que no tiene un formato especial aparte del relleno a su alrededor.
Sintaxis:
<div class="ui segment-variation-name segment"> ....... </div>
Ejemplo 1: a continuación se muestra el código que demuestra el uso de la clase invertida de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 40rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui inverted segment"> <p>GeeksforGeeks is a computer science portal.</p> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 2: a continuación se muestra el código que demuestra el uso de la clase adjunta de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 40rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui top attached segment"> <p>Topmost attached segment</p> </div> <div class="ui attached segment"> <p>Both sides attached segment</p> </div> <div class="ui bottom attached segment"> <p>Bottommost attached segment</p> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 3: a continuación se muestra el código que demuestra el uso de la clase rellenada de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 40rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui padded segment"> <p>GeeksforGeeks is a Computer Science portal!</p> </div> <div class="ui very padded segment"> <p>GeeksforGeeks is a Computer Science portal!</p> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 4: a continuación se muestra el código que demuestra el uso de la clase compacta de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 60rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui compact segments"> <div class="ui segment"> <p>GeeksforGeeks</p> </div> <div class="ui segment"> <p>It is a Computer Science Portal!</p> </div> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 5: a continuación se muestra el código que demuestra el uso de la clase coloreada de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Variations </title> <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> <center> <h1 class="ui green header">Geeksforgeeks</h1> <strong> Semantic-UI Segment Color Variations </strong> <br /> <br /> <div class=" ui container"> <div class="ui violet inverted segment"> Violet </div> <div class="ui purple inverted segment"> Purple </div> <div class="ui pink inverted segment"> Pink </div> <div class="ui brown inverted segment"> Brown </div> <div class="ui black inverted segment"> Black </div> </div> </center> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 6: a continuación se muestra el código que demuestra el uso de la clase de énfasis de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 30rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui inverted segment"> <p>GeeksforGeeks.</p> </div> <div class="ui secondary inverted segment"> <p>It is a Computer Science Portal</p> </div> <div class="ui tertiary inverted segment"> <p>For all Geeks and professionals!</p> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 7: a continuación se muestra el código que demuestra el uso de la clase circular de variación de segmento .
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Segment Variation
</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<style>
.circular{
height: 80px;
width: 80px;
}
</style>
</head>
<body style="margin-inline: 50rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Segment Variation
</h3>
</center>
<div class="ui inverted circular segment">
<h2 class="ui inverted header">
Complete Interview Preparation
<div class="sub header">Rs 5000/-</div>
</h2>
</div>
<div class="ui circular segment">
<h2 class="ui header">
DSA-Self Paced
<div class="sub header">Rs 3000/-</div>
</h2>
</div>
</body>
</html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 8: A continuación se muestra el código que demuestra el uso de la clase de compensación de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 50rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui clearing segment"> <div class="ui left green floated button"> Floated </div> </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 9: a continuación se muestra el código que demuestra el uso de la clase flotante de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 40rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui right floated segment"> <p> Left Segment </p> </div> <div class="ui left floated segment"> Right Segment </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 10: a continuación se muestra el código que demuestra el uso de la clase de alineación de texto de variación de segmento.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Segment Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> </head> <body style="margin-inline: 40rem;"> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Segment Variation </h3> </center> <div class="ui left aligned segment"> Left-GeeksforGeeks </div> <div class="ui center aligned segment"> Center-GeeksforGeeks </div> <div class="ui right aligned segment"> Right-GeeksforGeeks </div> </body> </html>
Producción:
Variaciones del segmento de la interfaz de usuario semántica
Ejemplo 11: a continuación se muestra el código que demuestra el uso de la clase básica de variación de segmento.
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:
Variaciones del segmento de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/segment.html#inverted