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 Variations Size Variant se usa para definir el tamaño del elemento de estadísticas. Hay seis tamaños diferentes que podemos usar en cualquier elemento de estadísticas.
Clases de variantes de tamaño de variaciones de estadísticas de interfaz de usuario semántica:
- mini: esta clase se utiliza para crear miniestadísticas.
- tiny: esta clase se utiliza para crear estadísticas diminutas.
- small: esta clase se utiliza para crear pequeñas estadísticas.
- normal: esta clase se utiliza para crear estadísticas normales.
- large: esta clase se utiliza para crear grandes estadísticas.
- enorme: esta clase se utiliza para crear estadísticas enormes.
Sintaxis : agregue cualquier clase de tamaño para Tamaño de los diferentes valores anteriores al contenedor de Estadísticas de la siguiente manera:
<div class="ui Size-Classes statistic">
<div class="..">
...
</div>
<div class="..">
..
</div>
</div>
El siguiente ejemplo ilustra la variante de tamaño de las variaciones de las estadísticas de la interfaz de usuario semántica:
Ejemplo : en este ejemplo, tenemos seis botones diferentes para diferentes tamaños que podemos alternar usando una función de javascript para agregar y eliminar las clases para la variación de tamaño de las estadísticas.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<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>
<h2>
Semantic-UI Statistics Size Variation
</h2>
<div class="ui mini statistic" id="gfgstats">
<div class="value">
12,330
</div>
<div class="label">
Views
</div>
</div>
<div>
<button id="mini"
class="active ui button"
onclick="changeSize('mini')">
mini
</button>
<button id="tiny"
class=" ui button"
onclick="changeSize('tiny')">
tiny
</button>
<button id="small"
class=" ui button"
onclick="changeSize('small')">
small
</button>
<button id="normal"
class=" ui button"
onclick="changeSize('normal')">
Normal
</button>
<button id="large"
class=" ui button"
onclick="changeSize('large')">
large
</button>
<button id="huge"
class="ui button"
onclick="changeSize('huge')">
huge
</button>
</div>
</center>
</div>
<script>
function changeSize(size){
var prevClass =$(".active").attr("id");
$(".active").toggleClass("active");
$("#"+size).toggleClass("active");
$("#gfgstats").removeClass(prevClass);
$("#gfgstats").addClass(size);
}
</script>
</body>
</html>
Producción:
Variaciones de las estadísticas de la interfaz de usuario semántica Variación de tamaño
Referencia: https://semantic-ui.com/views/statistic.html#size
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA