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.
Las tarjetas en la interfaz de usuario semántica se utilizan en general para mostrar contenido web al igual que las tarjetas de juego. La interfaz de usuario semántica nos proporciona tarjetas en muchas variaciones y con diferentes contenidos incluidos en la tarjeta. En este artículo, aprenderemos sobre la variación del enlace de la tarjeta de interfaz de usuario semántica y conoceremos la implementación junto con los ejemplos de código y la salida.
Esta tarjeta en la interfaz de usuario semántica está diseñada de tal manera que todo el contenido presente en la tarjeta está vinculado a otro sitio web, es decir, una vez que haga clic en el contenido de la tarjeta o en cualquier parte de la tarjeta, será redirigido a otra página que vincularlo a. Los contenidos presentes en la Variación de enlace de tarjeta de interfaz de usuario semántica son los siguientes.
Clase de contenido de variación de enlace de tarjeta de interfaz de usuario semántica:
- enlace: Habilita una carta levantada que se mueve cuando se desplaza.
Nota: si deseamos crear una tarjeta que, al hacer clic, se redirija a otra página, encierre toda la tarjeta con una etiqueta HTML <a> para que dirija a la página vinculada.
Sintaxis:
<a class="ui card" href="...."> <div class="content"> .... </div> </a>
Ejemplo 1: podemos incluir el encabezado en la clase de encabezado, la descripción en la clase de descripción e información adicional en la clase de contenido adicional , como se muestra en el siguiente ejemplo. Podemos observar que seremos redirigidos tan pronto como hagamos clic en la tarjeta.
HTML
<html> <head> <title>Semantic-UI Card Link Variation</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> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Link Variation</strong> <div class="ui raised link card"> <a class="ui card" href="https://www.geeksforgeeks.org/"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preparation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </a> </div> </center> </body> </html>
Producción:
Variación de enlace de tarjeta de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, podemos observar que no seremos redirigidos pero podemos observar movimiento en la tarjeta cuando se desplaza.
HTML
<html> <head> <title>Semantic-UI Card Link Variation</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> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Link Variation</strong> <div class="ui link card"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preperation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </div> </center> </body> </html>
Producción :
Variación de enlace de tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#link-card
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA