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. En este artículo, aprenderemos sobre Revelar estado deshabilitado.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Una revelación muestra contenido adicional en lugar del contenido anterior cuando está activado y no se animará cuando se desplace en un estado deshabilitado.
Semantic-UI Reveal Clase de estado deshabilitado:
- deshabilitado: una revelación deshabilitada no se animará al pasar el mouse sobre la imagen.
Sintaxis:
<div class="ui disabled move reveal"> ... </div>
El siguiente ejemplo ilustra el estado deshabilitado de revelación de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI </strong> <h3 class="ui dividing header"> Reveal Disabled State </h3> </center> <!--disabled class is used--> <div class="ui disabled move reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" class="ui small image"> </div> </div> </body> </html>
Producción:
Revelar estado deshabilitado de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic-UI Reveal Disabled State</strong> </center> <!--disabled class is used--> <div class="ui disabled move reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220220200617/gfg.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" class="ui small image"> </div> </div> </body> </html>
Producción:
Revelar estado deshabilitado de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/reveal.html#disabled
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA