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 de grupos y estados.
En este artículo, aprenderemos sobre los estados del segmento de la interfaz de usuario semántica junto con la implementación mediante el código de ejemplo.
Estados del segmento de la interfaz de usuario semántica: la interfaz de usuario semántica nos proporciona formas de crear una agrupación de contenido relacionado en dos estados, que son los siguientes:
1. Deshabilitado : el segmento que se utiliza para agrupar contenido relacionado muestra su contenido en estado deshabilitado. Podemos observar el contenido del segmento en la versión más ligera de lo habitual.
Sintaxis:
<div class="ui disabled segment"> ... </div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Disabled State</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 Disabled State</strong> <br /><br /> <div class="ui disabled 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:
2. Cargando : el segmento que se utiliza para agrupar contenido relacionado muestra su contenido en el estado de carga. Podemos observar un cargador y no se ve el contenido.
Sintaxis:
<div class="ui loading segment"> ... </div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Segment Loading State</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 Loading State</strong> <br /><br /> <div class="ui loading segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html>
Salida: Podemos observar que no se puede ver el contenido y en su lugar se muestra un cargador.
Referencia: https://semantic-ui.com/elements/segment.html#states
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA