Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
Las barras de progreso indican el progreso del trabajo realizado del trabajo total. Indica visualmente la cantidad de trabajo realizado con las barras. En este artículo, aprenderemos sobre la variación de color invertida del progreso de la interfaz de usuario semántica. La variación de color invertida se utiliza para invertir el color para lograr un mejor contraste en fondos oscuros.
Clases de tipo estándar de progreso de interfaz de usuario semántica:
- progreso: Esta clase se utiliza para indicar el progreso del evento.
- invertido: Esta clase se utiliza para invertir el color para generar un mejor contraste con el fondo oscuro.
Sintaxis:
<div class="ui color inverted progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>
Ejemplo 1: a continuación se muestra el código que demuestra la variación de color invertida de progreso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Inverted Color Variation
</title>
<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 style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Progress Inverted Color Variation
</h3>
</center>
<div class="ui inverted segment">
<div class="ui yellow inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ui olive inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ui green inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ignored">
<div class="ui icon buttons">
<div class="increment ui basic
inverted green button icon">
Increase
</div>
<div class="decrement ui basic
inverted red button icon">
Decrease
</div>
</div>
</div>
</div>
<script>
$('.decrement.ui.basic.inverted.red.button.icon').on('click', function() {
$('.gfg')
.progress('decrement')
;
});
$('.increment.ui.basic.inverted.green.button.icon').on('click', function() {
$('.gfg')
.progress('increment')
;
});
</script>
</body>
</html>
Producción:
Variación de color invertida del progreso de la interfaz de usuario semántica
Ejemplo 2: a continuación se muestra otro código que demuestra la variación de color invertida de progreso con un color diferente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Progress Inverted Color Variation
</title>
<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 style="margin-inline: 30rem;">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Progress Inverted Color Variation
</h3>
</center>
<div class="ui inverted segment">
<div class="ui teal inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ui blue inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ui violet inverted progress gfg">
<div class="bar">
<div class="progress"></div>
</div>
</div>
<div class="ignored">
<div class="ui icon buttons">
<div class="increment ui basic
inverted green button icon">
Increase
</div>
<div class="decrement ui basic
inverted red button icon">
Decrease
</div>
</div>
</div>
</div>
<script>
$('.decrement.ui.basic.inverted.red.button.icon').on('click', function() {
$('.gfg')
.progress('decrement')
;
});
$('.increment.ui.basic.inverted.green.button.icon').on('click', function() {
$('.gfg')
.progress('increment')
;
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/progress.html#inverted-color
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA