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.
Semantic-UI nos brinda una manera muy fácil de presentar una mejor interfaz de usuario en comparación con el CSS tradicional. Una de las características que ofrece Semantic-UI es Revelar , donde se muestra contenido adicional en lugar del contenido anterior cuando se activa el elemento. Tenemos diferentes tipos de revelación en la interfaz de usuario semántica que incluyen desvanecimiento, movimiento y rotación. En este artículo, aprenderemos sobre Semantic-UI Reveal Rotate Type junto con su implementación con la ayuda de un código de ejemplo.
En Semantic-UI Reveal Rotate Type , el elemento se puede girar para mostrar contenido adicional en lugar del contenido anterior. Los elementos se pueden girar hacia la izquierda o hacia la derecha para mostrar el contenido adicional.
Clase de tipo de rotación de revelación de interfaz de usuario semántica:
- rotar: esta clase se usa para hacer que el elemento pueda rotar.
Sintaxis:
<div class="ui rotate reveal image">
<div class="visible content">
// Content that is visible
</div>
<div class="hidden content">
// Content that is hidden
</div>
</div>
Ejemplo 1: Este ejemplo muestra la rotación correcta en Revelar.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Reveal Rotate Type</strong> <br><br> <div class="ui small rotate left reveal image"> <!-- Content that would be visible --> <div class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> </div> <!-- Content that would be hidden --> <div class="hidden content"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> </div> </div> </div> </center> </body> </html>
Salida: Podemos notar que el contenido anterior gira a la derecha para mostrar el contenido adicional.
Rotación a la derecha para mostrar contenido adicional
Ejemplo 2: Este ejemplo muestra la rotación a la izquierda en Revelar.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Reveal Rotate Type</strong> <br><br> <div class="ui small rotate left reveal image"> <img class="visible content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> <img class="hidden content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> </div> </div> </center> </body> </html>
Salida: Podemos notar que el contenido anterior gira a la izquierda para mostrar el contenido adicional.
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