Semantic UI es un marco de código abierto que nos ofrece clases especiales para crear interfaces de usuario sorprendentes y receptivas. Hace uso de jQuery y CSS para crear interfaces de usuario agradables que son muy parecidas a bootstrap. Tiene muchas clases que se utilizan para diseñar diferentes elementos en la estructura de la página web HTML.
El módulo de forma de interfaz de usuario semántica es un objeto tridimensional que se muestra en un plano bidimensional. Puede incluir contenido en todos sus lados. El tipo de cubo de forma de interfaz de usuario semántica se utiliza para crear un cubo que contiene algunos datos/valores en cada lado del cubo.
Nota: este módulo utiliza transformaciones 3D que actualmente solo son compatibles con los navegadores modernos.
Tipo de cubo de forma de interfaz de usuario semántica Clase utilizada:
- cubo: esta clase se utiliza para crear una forma de cubo con cada cara de los datos.
Sintaxis:
<div class="ui cube shape">
<div class="sides">
<div class="active side">
...
</div>
...
</div>
</div>
Ejemplo 1: En este ejemplo, describiremos el uso del tipo de cubo de forma de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Shape Cube Type
</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 class="ui container center aligned">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Shape Cube Type</h3>
<div class="ui cube shape">
<div class="sides">
<div class="side">
<div class="content">
<div class="center">
HTML
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
CSS
</div>
</div>
</div>
<div class="side active">
<div class="content">
<div class="center">
JavaScript
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
Bootstrap
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
Angujar.js
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
React.js
</div>
</div>
</div>
</div>
</div>
<br><br>
<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:
Tipo de cubo de forma de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos el uso del tipo de cubo de forma de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Shape Cube Type
</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 class="ui container center aligned">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Shape Cube Type</h3>
<div class="ui cube shape">
<div class="sides">
<div class="side">
<div class="content">
<div class="center">
HTML
</div>
</div>
</div>
<div class="ui red side">
<div class="content">
<div class="center">
CSS
</div>
</div>
</div>
<div class="side active">
<div class="content">
<div class="center">
JavaScript
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
Bootstrap
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
Angujar.js
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
React.js
</div>
</div>
</div>
</div>
</div>
<br><br>
<button class="ui button down">
Flip-Down
</button>
<button class="ui button left">
Flip-Left
</button>
</div>
<script>
// Initialize the shape
$('.shape').shape();
$('.down').click(function () {
// Make the shape flip up
$('.shape').shape('flip down');
})
$('.left').click(function () {
// Make the shape flip to the right
$('.shape').shape('flip left');
})
</script>
</body>
</html>
Producción:
Tipo de cubo de forma de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/shape.html#cube
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA