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.
La variación adjunta del segmento semántico de la interfaz de usuario se utiliza para adjuntar los segmentos entre sí. Podemos especificar la dirección de los segmentos que se unirán. Podemos unir a ambos lados, lado superior o inferior.
Clases de variación adjuntas al segmento semántico de la interfaz de usuario:
- adjunto : con esta clase, el segmento se adjunta a ambas direcciones.
- top : con esta clase, el segmento se adjunta a la dirección superior.
- bottom : con esta clase, el segmento se adjunta a la dirección inferior.
Sintaxis : agregue la variación adjunta deseada de las clases anteriores y agréguela al segmento de la siguiente manera:
<div class="ui top attached segment">
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos una lista de segmentos que están unidos entre sí.
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"/> </head> <body> <div class="ui container"> <center> <div class="ui header green"> <h1> GeeksforGeeks</h1> </div> <strong> Semantic UI Segment Attached Variation </strong> </center> <div class="ui top attached 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 attached 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 bottom attached 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> </body> </html>
Producción:
Variación adjunta del segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#attached
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA