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. Semantic-UI Reveal se usa para mostrar el contenido adicional en lugar del contenido anterior cuando el elemento está activado. Hay diferentes tipos de Revelar como Desvanecer, Mover y Rotar. En este artículo, discutiremos los tipos de revelación en la interfaz de usuario semántica.
Tipos de revelación de interfaz de usuario semántica:
- fade : Esta clase se usa para desaparecer el elemento para revelar el contenido.
- mover : esta clase se usa para mover el elemento para revelar el contenido.
- rotar : esta clase se usa para rotar el elemento para revelar el contenido.
Sintaxis:
<div class="ui Reveal-Types-Class reveal"> .... </div>
Ejemplo 1: el siguiente código demuestra el tipo de fundido de revelación de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Reveal Types</title> <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 Types </h3> </div> <br> <strong>Fade: </strong> <div class="ui fade reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220308182235/image-300x300.jpg" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="ui small image"> </div> </div> </body> </html>
Producción:
Tipos de revelación de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el tipo de movimiento de revelación de interfaz de usuario semántica .
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 Types </h3> </div> <br> <strong>Move: </strong> <div class="ui move reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220308182235/image-300x300.jpg" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="ui small image"> </div> </div> </body> </html>
Producción:
Ejemplo 3: el siguiente código demuestra el tipo de rotación de revelación de interfaz de usuario semántica .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Reveal Types</title> <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 Types </h3> </div> <br> <strong>Rotate: </strong> <div class="ui small circular rotate reveal image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220308182235/image-300x300.jpg" class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="hidden content"> </div> </body> </html>
Producción:
https://semantic-ui.com/elements/reveal.html
Referencia: https://semantic-ui.com/elements/reveal.html
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