Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo. En este artículo, discutiremos las variaciones de revelación en la interfaz de usuario semántica.
Semantic-UI Reveal se utiliza para mostrar la información adicional en lugar de la información anterior cuando se activa el elemento.
Clase de variaciones de revelación de interfaz de usuario semántica:
- instant : esta clase se utiliza para mostrar el contenido oculto sin demora.
Sintaxis:
<div class="ui instant
move/rotate reveal">
......
</div>
Ejemplo 1: el siguiente código demuestra las variaciones de revelación de la interfaz de usuario semántica moviendo una imagen.
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> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Reveal Variations </h3> </div><br> <div class="ui centered card"> <div class="ui instant move reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210318103632/gfg.png" class="ui medium image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png" class="ui medium image"> </div> </div> </div> </body> </html>
Producción:
Variaciones de revelación de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra las variaciones de revelación de la interfaz de usuario semántica girando una imagen.
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> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Reveal Variations </h3> </div><br> <div class="ui centered card"> <div class="ui instant rotate reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20201127103715/gfg4.png" class="ui medium image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" class="ui medium image"> </div> </div> </div> </body> </html>
Producción:
Variaciones de revelación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/reveal.html#instant
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA