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:
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:
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:
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