Interfaz de usuario semántica | Tarjetas

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *