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. 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. La IU semántica Reveal States nos ofrece Active y Disabled.
Estados de revelación de interfaz de usuario semántica:
- Activo : si se usa, un elemento puede mostrar su contenido sin demora.
- Deshabilitado: se usa para deshabilitar la revelación que no se animará cuando se desplace
Sintaxis:
<div class="ui Reveal-States move reveal">
...
</div>
El siguiente ejemplo ilustra los estados de revelación de la interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, usaremos el estado Activo.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Reveal States</title> <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 States</strong> </center> <!-- Active class is used --> <strong>Reveal Active States:</strong> <div class="ui active 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:
Estados de revelación de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, usaremos un estado deshabilitado.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Reveal States</title> <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 States</strong> </center> <strong>Reveal States:</strong> <div class="ui 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> <!--disabled class is used--> <strong>Reveal Disabled States:</strong> <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:
Estados de revelación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/reveal.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA