Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
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 la variación Invertida. La variación invertida del progreso de la interfaz de usuario semántica se utiliza para crear una barra de progreso que contiene sus colores invertidos.
Clase de variación invertida del progreso de la interfaz de usuario semántica:
- invertido: esta clase se utiliza para crear una barra de progreso que contiene colores invertidos.
Sintaxis:
<div class="ui inverted segment">
<div class="ui inverted progress ....">
<div class="bar">
<div class="progress"></div>
</div>
...
</div>
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra la variación invertida del progreso de la interfaz de usuario semántica.
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>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong> Semantic-UI Progress Inverted Variation </strong>
</center>
<div class="ui inverted segment">
<div class="ui inverted progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progressing</div>
</div>
<div class="ui inverted progress success"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Success</div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$(".ui.progress").progress();
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra la clase de progreso invertida junto con las clases de éxito , advertencia y error .
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>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong> Semantic-UI Progress Inverted Variation </strong>
</center>
<div class="ui inverted segment">
<div class="ui inverted progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Progressing</div>
</div>
<div class="ui inverted progress success"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Success</div>
</div>
<div class="ui inverted progress warning"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Warning</div>
</div>
<div class="ui inverted progress error"
data-value="100" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Error</div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$(".ui.progress").progress();
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/progress.html#inverted
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA