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.
Un progreso de la interfaz de usuario semántica permite a un usuario mostrar la progresión de una tarea. Semantic UI Progress nos ofrece 2 tipos, 3 contenidos, 5 estados y 5 variaciones.
En este artículo, aprenderemos sobre las variaciones de Semantic UI Progress.
Variaciones de progreso de la interfaz de usuario semántica:
- Invertido : Se utiliza para configurar la barra de progreso con los colores invertidos.
- Adjunto: se utiliza para crear una barra de progreso que puede mostrar el progreso de un elemento en el archivo adjunto superior o inferior.
- Tamaño : se utiliza para crear diferentes tamaños de barras de progreso.
- Color : se utiliza para crear diferentes componentes de progreso de color.
- Color invertido : se utiliza para invertir y mejorar el contraste en fondos oscuros.
Sintaxis:
<div class="ui Progress-Variation progress">
<div class="bar"></div>
....
</div>
Ejemplo 1: Los siguientes ejemplos ilustran las variaciones de tamaño y color del progreso de 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>
</head>
<body>
<div class="ui container">
<center>
<div>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>Semantic-UI Progress Variations</strong>
</div>
</center>
<!-- Tiny Sized Color 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 - Red Tiny Size
</div>
</div>
<!-- Small Sized color 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 - Orange Small Size
</div>
</div>
<!-- Default Sized Color 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 - Yellow Default Size
</div>
</div>
<!-- Large Sized Color 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 - Blue Large Size
</div>
</div>
<!-- Big Sized Color 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 - Pink Big Size
</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Variaciones de progreso de la interfaz de usuario semántica
Ejemplo 2: El siguiente código demuestra una variación de progreso invertida y adjunta .
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>
</head>
<body>
<div class="ui container">
<center>
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic-UI Progress Variations</strong>
</div>
</center>
<strong>Inverted Progress:</strong>
<div class="ui inverted segment">
<div class="ui inverted progress" data-value="20"
data-total="100">
<div class="bar" >
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="ui inverted progress success" data-value="40"
data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">File Sending</div>
</div>
</div>
<strong>Attached Progress:</strong>
<div class="ui segment">
<div class="ui top attached progress" data-value="20"
data-total="100">
<div class="bar"></div>
</div>
<p>GeeksforGeeks</p>
<div class="ui bottom attached green progress" data-value="30"
data-total="100">
<div class="bar"></div>
</div>
</div>
<strong>Inverted Color Progress:</strong>
<div class="ui inverted segment">
<div class="ui blue inverted progress" data-value="10"
data-total="100">
<div class="bar">
<div class="progress"></div>
<div class="label"></div>
</div>
</div>
<div class="ui green inverted progress" data-value="10"
data-total="100">
<div class="bar">
<div class="progress"></div>
<div class="label"></div>
</div>
</div>
</div>
</div>
<script>
$(".ui.progress").progress();
</script>
</body>
</html>
Producción:
Variaciones de progreso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA