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 de énfasis de segmento de IU semántica se utiliza para enfatizar un segmento y hacer que otro segmento sea menos perceptible. Podemos hacer que un segmento sea más o menos notable usando esta variación.
Clases de variación de énfasis de segmento de interfaz de usuario semántica:
- primario : el segmento aparece como un segmento normal al usar esta clase.
- secundario _ El segmento parece ser menos perceptible al usar esta clase.
- terciario : El segmento aparece aún menos perceptible.
Sintaxis : enfatiza el segmento usando las clases anteriores en el segmento de la siguiente manera:
<div class="ui Emphasis-Variation-Classes segment">
...
</div>
Ejemplo 1 : En el siguiente ejemplo, tenemos tres segmentos con diferentes niveles de énfasis.
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 Emphasis Variation </strong> </center> <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 secondary 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 tertiary 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 de énfasis de segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#emphasis
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA