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. Utiliza una clase para agregar CSS a los elementos.
Una tarjeta se utiliza para mostrar el contenido similar a una tarjeta de juego.
Ejemplo 1: este ejemplo crea una tarjeta simple usando Semantic-ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</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"> <div class="ui card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> </div> <div class="content"> <a class="header">Geeksforgeeks</a> <div class="description"> A Computer SCience Portal. </div> </div> <div class="extra content"> <a> <i class="user icon"></i> 1m Followers </a> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 2:
Este ejemplo crea un grupo de tarjetas usando Semantic-ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui cards"> <div class="card"> <div class="content"> <img class="right floated mini ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> <div class="header"> Geeksforgeeks </div> <div class="meta"> A computer science Portal </div> <div class="description"> Geeksforgeeks wants to follow you. </div> </div> <div class="extra content"> <div class="ui two buttons"> <div class="ui basic green button">Approve</div> <div class="ui basic red button">Decline</div> </div> </div> </div> <div class="card"> <div class="content"> <img class="right floated mini ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png"> <div class="header"> Geeksforgeeks </div> <div class="meta"> A computer Science Portal. </div> <div class="description"> Geeksforgeeks wants to be your friend. </div> </div> <div class="extra content"> <div class="ui two buttons"> <div class="ui basic green button">Approve</div> <div class="ui basic red button">Decline</div> </div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 3: este ejemplo crea una tarjeta que contiene algún botón usando Semantic-ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui card"> <div class="content"> <div class="header">Geeksforgeeks</div> </div> <div class="content"> <h4 class="ui sub header">Activity</h4> <div class="ui small feed"> <div class="event"> <div class="content"> <div class="summary"> Your friend Rahul Joined the course. </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> Started next Friday </div> </div> </div> </div> </div> <div class="extra content"> <button class="ui button"> Join Course </button> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Tarjeta de imagen con efecto al pasar el mouse: para esto, necesita importar la biblioteca jQuery.
Código jQuery
$('.special.cards .image').dimmer({
on: 'hover'
});
Código completo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 20px;" class="ui container">
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">
Add Friend
</div>
</div>
</div>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</div>
<div class="content">
<a class="header">Geeksforgeeks</a>
<div class="meta">
<span class="date">Newly Joined</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
10 Friends
</a>
</div>
</div>
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui primary button">
Add Friend
</div>
</div>
</div>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">
</div>
<div class="content">
<a class="header">Geeksforgeeks</a>
<div class="meta">
<span class="date">
You and Geeksforgeeks have 20 mutual Friends
</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
500 Friends.
</a>
</div>
</div>
</div>
</div>
<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>
<script>
$('.special.cards .image').dimmer({
on: 'hover'
});
</script>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo crea una tarjeta que contiene algún botón usando Semantic-ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui cards"> <div class="card"> <div class="content"> <div class="header">Geeksforgeeks</div> <div class="description"> A Computer Science Portal. </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Join </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 6: este ejemplo crea una tarjeta de aprobación utilizando Semantic-ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui card"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header">Geeksforgeeks</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> Like </span> <span class="right floated star"> <i class="star icon"></i> Star </span> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Puede probar diferentes cosas en la tarjeta desde la interfaz de usuario semántica.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA