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 Statistics nos ofrece dos tipos de estadísticas con los seis tipos de variación como Horizontal, Coloreada, Invertida, Uniforme, Flotante y de diferentes tamaños. En este artículo, aprenderemos sobre la variante flotante de variaciones de estadísticas de interfaz de usuario semántica.
Semantic-UI Statistics Floated Variation ofrece diferentes variaciones para alinear los otros contenidos como párrafos, encabezados, etc. para alinearlos en qué dirección. Los contenidos y el elemento Estadísticas están anidados dentro de una clase para la dirección Flotante.
Clases de variación flotante de estadísticas de interfaz de usuario semántica:
- left floated : Esto significa que las estadísticas flotarán en la dirección izquierda del contenido.
- right floated : Esto significa que las Estadísticas flotarán en la dirección correcta del contenido.
Sintaxis : establezca el flotante a la izquierda o a la derecha de las estadísticas con el resto del contenido de la siguiente manera
<div class="ui Floated-Classes statistic">
<div class=".."> ... </div>
<div class=".."> ... </div>
</div>
El siguiente ejemplo ilustra la variante flotante de las variaciones de las estadísticas de la interfaz de usuario semántica:
Ejemplo : En el siguiente ejemplo, estamos alternando la dirección Flotante de Estadísticas usando un botón y una función de Javascript.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Statistics Floated Variation
</strong>
<div class="ui segment large">
<div class="ui left floated statistic mini"
id="gfgstats">
<div class="value">
12,330
</div>
<div class="label">
Views
</div>
</div>
<p>
GeeksforGeeks is a computer
science portal for geeks.
</p>
</div>
<div>
<button onclick="changeFloat()">
Change Float Direction
</button>
</div>
</center>
</div>
<script>
function changeFloat(){
$("#gfgstats").toggleClass("left floated")
$("#gfgstats").toggleClass("right floated")
}
</script>
</body>
</html>
Producción:
Variaciones de las estadísticas de la interfaz de usuario semántica Variante flotante
Referencia: https://semantic-ui.com/views/statistic.html#floated
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA