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 que esté relacionado, en general usamos segmentos. Ofrece segmentos en diferentes variaciones, tipos de grupos y estados.
En este artículo, aprenderemos sobre la variación circular del segmento de interfaz de usuario semántica junto con la implementación utilizando el código de ejemplo.
Los segmentos en Semantic-UI se utilizan en la agrupación de contenido relacionado. En la variación circular de segmentos de interfaz de usuario semántica, podemos crear segmentos en forma circular. Ahora, comprendamos la sintaxis.
Clase de contenido de variación circular de segmento de interfaz de usuario semántica:
- circular: esta clase se utiliza para hacer que el segmento tenga forma circular para crear una variación circular del segmento.
Sintaxis:
<div class="ui circular segment"> ...... </div>
Ejemplo 1: Podemos observar que el segmento tiene forma circular. Podemos agregar contenido en el segmento como se muestra en el siguiente ejemplo.
HTML
<html> <head> <title>Semantic-UI Segment Circular 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 Circular Variation </strong><br><br> <div class="ui circular segment"> <h2 class="ui header"> Gfg <div class="sub header">Segment</div> </h2> </div> </div> </center> </body> </html>
Producción :
Variación circular del segmento de interfaz de usuario semántica
Ejemplo 2: Incluso podemos usar colores invertidos para el contraste en un segmento circular.
HTML
<html> <head> <title>Semantic-UI Segment Circular 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 Circular Variation </strong><br><br> <div class="ui inverted circular segment"> <h2 class="ui inverted header"> Gfg <div class="sub header">Segment</div> </h2> </div> </div> </center> </body> </html>
Producción :
Variación circular del segmento de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/segment.html#circular
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA