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 tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente Segmentos. Los segmentos se utilizan para mostrar diferentes secciones de contenido relacionado. Dependiendo de los requisitos de uso de los segmentos, existen diferentes estados de los mismos. Uno de ellos es el estado de discapacidad.
Estado deshabilitado del segmento semántico de la interfaz de usuario: es posible que el usuario deba mostrar un segmento deshabilitado de forma predeterminada. Es posible que el usuario deba mostrar algunos segmentos en la interfaz de usuario cuyos valores no deben cambiarse o la persona no tiene acceso para interactuar con ellos. En ese caso, un estado deshabilitado es útil.
Clase de estado deshabilitado del segmento semántico de la interfaz de usuario:
- disabled: esta clase se utiliza para especificar el estado deshabilitado de los segmentos.
Sintaxis:
<div class="ui disabled segment"> ....... </div>
Estos ejemplos demuestran un segmento o grupo de segmentos en un estado deshabilitado mediante el uso de la clase deshabilitada .
Ejemplo 1 :
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic UI Segment Disabled State</strong> <br> <hr> <br> <div class="ui disabled segment"> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p> Get tutorial of anything related to computer science. </p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </div> </body> </html>
Producción:
Estado deshabilitado del segmento de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br><br> <h2 class="ui header green">GeeksforGeeks</h2> <strong> Semantic UI Segment Disabled State</strong> <br> <hr> <br> <div class="ui disabled segments"> <div class="ui disabled red segment"> <p>Data Structure</p> </div> <div class="ui disabled green segment"> <p>Web Programming</p> </div> <div class="ui disabled blue segment"> <p>Competative Programming</p> </div> </div> </div> </body> </html>
Producción :
Estado deshabilitado del segmento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/segment.html#disabled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA