Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
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, vamos a aprender sobre Semantic-UI Reveal Visible Content y también aprenderemos cómo implementarlo con la ayuda de ejemplos de código.
Clases de contenido visible de revelación de interfaz de usuario semántica:
- contenido visible: esta clase se usa para agregar contenido que será visible incluso antes de que se active el elemento y cuando se activa un elemento, muestra el contenido anterior.
- contenido oculto: esta clase se usa para agregar contenido que se ocultará antes de que se active el elemento y cuando se activa un elemento, muestra contenido adicional.
Sintaxis:
<div class="ui small fade reveal image"> <img class="visible content" src="..."> <img class="hidden content" src="..."> </div>
Ejemplo 1: El siguiente ejemplo demostró el uso de Revelar contenido visible usando imagen y texto.
HTML
<html> <head> <title>Semantic-UI Reveal Visible Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <br><br><br> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Reveal Visible Content </h3> <div class="ui small reveal fade image"> <img class="visible content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> <h2 class="hidden content"> GeeksforGeeks </h2> </div> </center> </body> </html>
Producción:
La interfaz de usuario semántica revela contenido visible
Ejemplo 2: El siguiente ejemplo demostró el uso de Revelar contenido visible usando dos imágenes.
HTML
<html> <head> <title>Semantic-UI Reveal Visible Content</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <br><br><br> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic-UI Reveal Visible Content </h3> <div class="ui small fade reveal image"> <img class="hidden content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> <img class="visible content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220306132642/gfglogo-300x240.jpg"> </div> </center> </body> </html>
Producción:
La interfaz de usuario semántica revela contenido visible
Enlace de referencia: https://semantic-ui.com/elements/reveal.html#visible-content
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA