Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La interfaz de usuario semántica nos brinda una manera muy fácil de diseñar la aplicación web en lugar de usar CSS. Para crear una agrupación de contenido relacionado, usamos segmentos. Ofrece segmentos en diferentes variaciones, tipos, grupos y estados.
En este artículo, aprenderemos sobre la variación del segmento compacto de interfaz de usuario semántica junto con la implementación mediante el código de ejemplo.
Los segmentos en Semantic-UI se utilizan en la agrupación de contenido relacionado. En la variación Semantic-UI Segment Compact, el segmento ocupa tanto espacio como el contenido escrito necesario. No ocupa espacio extra.
Clase de variación compacta del segmento de interfaz de usuario semántica:
- compacto: esta clase se utiliza para que el segmento ocupe tanto espacio como sea necesario.
Sintaxis:
<div class="ui compact segment"> .... </div>
Ejemplo 1: podemos observar que el segmento ocupa todo el espacio que necesita con respecto al contenido, de modo que el contenido se empaqueta por completo en el segmento.
HTML
<html> <head> <title> Semantic-UI Segment Compact Variation </title> <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" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Segment Compact Variation </strong><br><br> <div class="ui compact segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html>
Producción :
Variación compacta del segmento de interfaz de usuario semántica
Ejemplo 2: Incluso podemos usar dos segmentos en la variación Semantic-UI Segment Compact que se ilustra en este ejemplo.
HTML
<html> <head> <title>Semantic-UI Segment Compact Variation</title> <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" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Segment Compact Variation </strong><br><br> <div class="ui compact segments"> <div class="ui segment"> <p> Semantic-UI Segment Compact Variation </p> </div> <div class="ui segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </div> </center> </body> </html>
Producción :
Variación compacta del segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#compact
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA