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 su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo.
El elemento Tarjeta de IU semántica muestra el contenido del sitio de manera similar a un naipe que usa las clases de IU semántica. Las tarjetas de interfaz de usuario semántica tienen varias secciones, como contenido, contenido adicional, aprobación y descripción.
En este artículo, aprenderemos sobre el bloque de aprobación de la tarjeta de interfaz de usuario semántica. El contenido de imagen de tarjeta de interfaz de usuario semántica se utiliza para crear una tarjeta que contiene imágenes. Podemos agregar una o dos imágenes en el elemento de la tarjeta y podemos cambiar la imagen en el elemento flotante o cambiar el estilo de la tarjeta en el elemento flotante.
Clase de contenido de imagen de tarjeta de interfaz de usuario semántica:
- imagen: esta clase se utiliza para agregar la imagen en el elemento de la tarjeta.
Sintaxis:
<div class="ui card">
<div class="ui image">
<img src="gfg.jpg">
...
</div>
<div class="content">
...
</div>
...
</div>
Ejemplo 1: en este ejemplo, describiremos el contenido de la imagen de la tarjeta de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Card Image Content </title> <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> <div class="ui container"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Card Image Content</h3> <div class="ui card"> <div class="ui slide masked reveal image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg" class="visible content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="hidden content"> </div> <div class="extra content"> <div class="left floated"> <i class="comments icon"></i> 101 </div> <div class="right floated author"> Author: <i>Sandeep Jain</i> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, describiremos el contenido de la imagen de la tarjeta de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Card Image Content
</title>
<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>
<div class="ui container">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Card Image Content</h3>
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui primary button">
Like
</div>
</div>
</div>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="extra content">
<div class="left floated">
<i class="like icon"></i> 101
</div>
<div class="right floated author">
Author: <i>Sandeep Jain</i>
</div>
</div>
</div>
</div>
</div>
<script>
$('.special.cards .image').dimmer({
on: 'hover'
});
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/views/card.html#image
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA