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.
Revelar es una función de Semantic-UI en la que se puede mostrar contenido adicional en lugar del contenido anterior cuando se activa el elemento. La interfaz de usuario semántica ofrece diferentes tipos de revelación como desvanecimiento, movimiento y rotación y con diferentes tipos de visualización de contenidos que incluyen contenido visible, contenido oculto y también en diferentes variaciones y estados.
En este artículo, aprenderemos sobre el contenido de revelación de interfaz de usuario semántica y también cómo implementarlo con la ayuda de ejemplos de código.
Contenido de revelación de interfaz de usuario semántica: incluye contenido visible y contenido oculto
- Contenido visible: el contenido adicional será visible incluso antes de que se active el elemento y cuando se activa un elemento, muestra el contenido anterior.
Sintaxis:
<div class="ui small fade reveal image"> <img class="visible content" src="Link"> <img class="hidden content" src="Link"> </div>
Ejemplo: Este ejemplo ilustra Revelar contenido en Semantic-UI al establecer el valor de clase de contenido visible a contenido oculto.
HTML
<html> <head> <title>Semantic-UI Reveal Content</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> <div class="ui container"> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic-UI Reveal Content</strong> <br> <div class="ui small fade reveal image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="hidden content"> </div> </div> </body> </html>
Producción:
- Contenido oculto : el contenido adicional se ocultará antes de que se active el elemento y cuando se activa un elemento, muestra contenido adicional.
Ejemplo: Este ejemplo ilustra Revelar contenido en Semantic-UI al establecer el valor de clase de contenido oculto a contenido visible.
HTML
<html> <head> <title>Semantic-UI Reveal Content</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> <div class="ui container"> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic-UI Reveal Content</strong> <br> <div class="ui small fade reveal image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="visible content"> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/reveal.html#content
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA