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.
La interfaz de usuario semántica nos proporciona una manera muy fácil de revelar contenido de una manera muy sencilla en lugar de usar CSS. Semantic UI Reveal es una función en la que se muestra 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.
En este artículo, aprenderemos sobre el tipo de movimiento de revelación de interfaz de usuario semántica y su implementación mediante un código de ejemplo.
Tipo de movimiento de revelación de IU semántica: el tipo de movimiento de revelación de IU semántica es un método revelador en el que un elemento se mueve en una dirección específica para mostrar información adicional en lugar del contenido anterior. El elemento se puede mover hacia la derecha, izquierda, arriba o abajo para revelar el contenido.
Clases de tipo de movimiento de revelación de interfaz de usuario semántica:
- izquierda: esta clase se utiliza para establecer el movimiento hacia la izquierda para revelar el elemento.
- right: Esta clase se usa para establecer el movimiento correcto para revelar el elemento.
- arriba: Esta clase se usa para establecer el movimiento hacia arriba para revelar el elemento.
- abajo: esta clase se usa para establecer un movimiento hacia abajo para revelar el elemento.
Sintaxis:
<div class="ui move right reveal">
<div class="visible content">
....
</div>
<div class="hidden content">
....
</div>
</div>
Nota: Los desarrolladores pueden usar los diferentes tipos de revelación para el movimiento usando las clases anteriores.
Ejemplo 1: Podemos observar que el elemento se mueve hacia la izquierda para mostrar el contenido adicional.
HTML
<!DOCTYPE html> <head> <title>Semantic-UI Reveal Move Type</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> <h2 class="ui header green"> Geeksforgeeks </h2> <strong>Semantic UI Reveal Move Type</strong> <br><br> <div class="ui move reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="ui small image"> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: Podemos observar que el elemento se mueve hacia la derecha para mostrar el contenido adicional.
HTML
<html> <head> <title>Semantic-UI Reveal Move Type</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 Move Type</strong> <br><br> <div class="ui move right reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="ui small image"> </div> </div> </div> </body> </html>
Producción:
Tipo de movimiento de revelación de interfaz de usuario semántica
Ejemplo 3: Podemos observar que el elemento se mueve hacia la parte superior para mostrar el contenido adicional.
HTML
<html> <head> <title>Semantic-UI Reveal Move Type</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 Move Type</strong> <br><br> <div class="ui move up reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="ui small image"> </div> </div> </div> </body> </html>
Producción:
Tipo de movimiento de revelación de interfaz de usuario semántica
Ejemplo 4: Podemos observar que el elemento se mueve hacia abajo para mostrar el contenido adicional.
HTML
<html> <head> <title>Semantic-UI Reveal Move Type</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 Move Type</strong> <br><br> <div class="ui move down reveal"> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" class="ui small image"> </div> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="ui small image"> </div> </div> </div> </body> </html>
Producción:
Tipo de movimiento de revelación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/reveal.html#move
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA