La interfaz de usuario semántica es un marco CSS construido con menos y jQuery . Se envía con elementos y módulos prediseñados que ayudan a los desarrolladores a crear interfaces web receptivas y hermosas más rápido.
Se utiliza un módulo de progreso de la interfaz de usuario semántica para mostrar el progreso de cualquier tarea al usuario en el front-end. En este artículo, veremos los diferentes tamaños del módulo de progreso en la interfaz de usuario semántica.
Clases de tamaño de progreso de IU semántica:
- tiny: esta clase se usa en el módulo de progreso para que sea el más pequeño en tamaño.
- pequeño: esta clase se usa en el módulo de progreso para que sea de tamaño pequeño.
- grande: esta clase se usa en el módulo de progreso para hacerlo más grande
- grande: esta clase se usa en el módulo de progreso para que tenga el tamaño más grande.
Sintaxis:
<div class="ui progress Progress-Size-Class">
....
</div>
Ejemplo 1: El siguiente ejemplo muestra el uso de las clases de tamaño de progreso para cambiar el tamaño de una barra de progreso en la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and CSS -->
<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>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.progress {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h4>Semantic UI - Progress Sizes Variation</h4>
</div>
<!-- Tiny Sized Progress Bar -->
<div class="ui progress tiny"
data-value="40"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress Bar - Tiny Size
</div>
</div>
<!-- Small Sized Progress Bar -->
<div class="ui progress small"
data-value="50"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Small Size
</div>
</div>
<!-- Default Sized Progress Bar -->
<div class="ui progress"
data-value="60"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Default Size
</div>
</div>
<!-- Large Sized Progress Bar -->
<div class="ui progress large"
data-value="70"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Large Size
</div>
</div>
<!-- Big Sized Progress Bar -->
<div class="ui progress big"
data-value="80"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Big Size
</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Variación del tamaño del progreso de la interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra los tamaños de progreso en la interfaz de usuario semántica con diferentes colores.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and CSS -->
<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>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.progress {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h4>Semantic UI - Progress Sizes Variation</h4>
</div>
<!-- Tiny Sized Progress Bar -->
<div class="ui progress tiny red"
data-value="40"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress Bar - Tiny Size
</div>
</div>
<!-- Small Sized Progress Bar -->
<div class="ui progress small orange"
data-value="50"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Small Size
</div>
</div>
<!-- Default Sized Progress Bar -->
<div class="ui progress yellow"
data-value="60"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Default Size
</div>
</div>
<!-- Large Sized Progress Bar -->
<div class="ui progress large blue"
data-value="70"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Large Size
</div>
</div>
<!-- Big Sized Progress Bar -->
<div class="ui progress big pink"
data-value="80"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">
Progress - Big Size
</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Variación del tamaño del progreso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html#size
Publicación traducida automáticamente
Artículo escrito por prashantrathore1159 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA