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.
Un 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.
Nota: este módulo utiliza transformaciones 3D que actualmente solo son compatibles con los navegadores modernos.
El tipo de texto de forma de interfaz de usuario semántica se utiliza para mostrar el texto que tiene formato para los lados del texto que se va a mostrar.
Tipo de texto de forma de interfaz de usuario semántica Clase utilizada:
- texto: esta clase se usa para agregar texto al lado de la forma.
Sintaxis:
div class="ui text shape">
<div class="sides">
...
</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos los usos del tipo de texto de forma de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Shape Text 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>
<h2>Semantic-UI Shape Text Type</h2>
<div class="ui text shape">
<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">
Web Technology
</div>
<div class="ui header side">
Java Programming
</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 texto de forma de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos los usos del tipo de texto de forma de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Shape Text 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>
<h2>Semantic-UI Shape Text Type</h2>
<div class="ui text shape">
<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">
Web Technology
</div>
<div class="ui header side">
Java Programming
</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 texto de forma de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/shape.html#text
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA