Tipos de formas de interfaz de usuario semántica

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.

Semantic UI Shape nos ofrece tres tipos diferentes de formas que son forma, cubo y texto. 

Tipos de formas de interfaz de usuario semántica:

  • Forma: Se utiliza para que la forma pueda ser un objeto tridimensional incluyendo cualquier contenido plano aparte.
  • Cubo : se usa para que la forma del cubo tenga el formato de modo que cada lado sea la cara de un cubo.
  • Texto : se utiliza para que la forma del texto se formatee para permitir que se muestren los lados del texto.

Sintaxis:

<div class="ui text shape">
   ...
</div>

Los siguientes ejemplos ilustran los tipos de formas de la interfaz de usuario semántica.

Ejemplo 1: El siguiente ejemplo demuestra la clase de forma de personas .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Shape Types</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
<body>
    <center>
        <h2 class="ui header green">Geeksforgeeks</h2>
        <strong>Semantic-UI Shape Types    </strong>
        <br>
        <div class="ui people shape">
          <div class="sides">
            <div class="active side">
              <div class="ui card">
                <div class="image">
                  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220311131509/people-200x200.png">
                </div>
                <div class="content">
                  <div class="header">John Dey</div>
                  <div class="meta">
                    <a>Founder of Geeksforgeeks</a>
                  </div>
                  <div class="description">
                    Sandeep Jain. Founder at GeeksforGeeks.
                    DSA Self Paced CourseIndian Institute
                    of Technology, Roorkee.
                  </div>
                </div>
                <div class="extra content">
                  <span class="right floated">
                    Created 2009
                  </span>
                  <span>
                    <i class="user icon"></i>
                    100M+
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
    </center>
</body>
</html>

Producción:

Semantic-UI Shape Types

Tipos de formas de interfaz de usuario semántica

Ejemplo 2: En este ejemplo, usaremos una forma de cubo que parece un dado.

HTML

<html>
<head>
    <title>
        Semantic UI Shape Types
    </title>
    <!-- Include the Semantic UI CSS -->
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
       <!-- Include jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <!-- Include Semantic UI -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div style="margin-top: 100px"
         class="ui container">
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong>Semantic UI Shape Types</strong>
     
        <!-- Define the shape -->
        <div class="ui cube shape">
     
        <!-- Define the contents of the sides -->
        <div class="sides">
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 1
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 2
                </div>
            </div>
            </div>
            <div class="side active">
            <div class="content">
                <div class="center">
                This is side 3
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 4
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 5
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 6
                </div>
            </div>
            </div>
        </div>
        </div>
        <br>
        <br>
     
        <!-- Define buttons for flipping the shape -->
        <button class="ui button up">
        Flip-Up
        </button>
        <button class="ui button right">
        Flip-Right
        </button>
    </div>
    <script>
     
        // Initialize the shape
        $('.shape').shape();
     
        $('.up').click(function () {
     
        // Make the shape flip up
        $('.shape').shape('flip up');
        })
     
        $('.right').click(function () {
     
        // Make the shape flip to the right
        $('.shape').shape('flip right');
        })
    </script>
</body>
</html>

Producción: 

Semantic-UI Shape Types

Tipos de formas de interfaz de usuario semántica

Ejemplo 3: En este ejemplo, usaremos la forma del texto , de modo que podamos levantar el texto cuando se coloque en los dados.

HTML

<!DOCTYPE html>
<html>
<head>
     
    <!-- Include the Semantic UI CSS -->
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
           rel="stylesheet" />
      <!-- Include jQuery -->
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
     
    <!-- Include Semantic UI -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
<body>
    <div style="margin-top:100px"
        class="ui container">
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong> Semantic UI Shape Types </strong>
        <br>
        <!-- Define the shape -->
        <div class="ui text shape">
     
        <!-- Define the contents of the sides -->
        <div class="sides">
            <div class="active ui header side">
            Welcome to geeksforgeeks
            </div>
            <div class="ui header side">
            A computer science portal.
            </div>
            <div class="ui header side">
            You can information about
            anything related to computers.
            </div>
            <div class="ui header side">
            You can even contribute
            to help others and earn money.
            </div>
        </div>
        </div>
        <br>
        <br>
     
        <!-- Define buttons for
        flipping the shape -->
        <button class="ui button up">
        Flip-Up
        </button>
        <button class="ui button right">
        Flip-Right
        </button>
     
    </div>
    <script>
     
        // Initialize the shape
        $('.shape').shape();
        $('.up').click(function () {
     
        // Make the shape flip up
        $('.shape').shape('flip up');
        })
        $('.right').click(function () {
     
        // Make the shape flip to the right
        $('.shape').shape('flip right');
        })
    </script>
</body>
</html>

Producción:

Semantic-UI Shape Types

Tipos de formas de interfaz de usuario semántica

Referencia: https://semantic-ui.com/modules/shape.html

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *