Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Tiene diferentes elementos que se pueden usar para hacer que los sitios web se vean más sorprendentes. Uno de los módulos en Semantic UI es el módulo de forma . Una forma es un objeto tridimensional que se muestra en un plano bidimensional. Puede incluir contenido en todos sus lados.
Nota: este módulo utiliza transformaciones 3D que actualmente solo son compatibles con los navegadores modernos.
Sintaxis:
$('.shape').shape();
$('.up').click(function() {
$('.shape').shape('flip up');
})
$('.right').click(function() {
$('.shape').shape('flip right');
})
Ejemplo: El siguiente ejemplo muestra cómo se puede usar jQuery para «voltear hacia atrás» o «girar hacia la izquierda» el cubo y rotarlo en consecuencia.
html
<html>
<head>
<title>
Semantic UI
</title>
<!-- Include the Semantic UI CSS -->
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Shape</h2>
<!-- 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>
<!-- 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>
<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: El siguiente ejemplo muestra una forma de texto que permite que el texto se muestre a los lados de la forma.
html
<html>
<head>
<title>
Semantic UI
</title>
<!-- Include the Semantic UI CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Shape</h2>
<!-- 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>
<!-- 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>
<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:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA