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.
La interfaz de usuario semántica tiene un componente de progreso para ampliar el progreso de una tarea en particular. Los usuarios también pueden elegir un color particular para un progreso específico. Veamos esta variación del progreso.
La variación de color del progreso de la interfaz de usuario semántica se utiliza para mostrar diferentes colores según su uso. Cada progreso se puede mostrar en un color único para representar su importancia. Un progreso individual o grupal que muestre contenido relacionado se puede mostrar en diferentes colores. Crearemos una interfaz de usuario para mostrar la variación de color del progreso.
Clases de variación de color de progreso de interfaz de usuario semántica:
- rojo: esta clase se utiliza para establecer el color del progreso en rojo.
- naranja: esta clase se utiliza para establecer el color del progreso en naranja.
- amarillo: esta clase se utiliza para establecer el color del progreso en amarillo.
- oliva: esta clase se utiliza para establecer el color del progreso en la aceituna.
- verde: esta clase se utiliza para establecer el color del progreso en verde.
- verde azulado: esta clase se utiliza para establecer el color del progreso en verde azulado.
- azul: esta clase se utiliza para establecer el color del progreso en azul.
- violeta: esta clase se utiliza para establecer el color del progreso en violeta.
- púrpura: esta clase se usa para establecer el color del progreso en rojo.
- rosa: esta clase se usa para establecer el color del progreso en rosa.
- marrón: esta clase se usa para establecer el color del progreso en marrón.
- gris: esta clase se utiliza para establecer el color del progreso en gris.
Sintaxis:
<div class="ui Colored-Variation-Classes progress">
<div class="bar"></div>
...
</div>
Ejemplo 1: Este ejemplo demuestra el progreso de una variación coloreada junto con una variación no coloreada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Color Variation</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic-UI Progress Color Variation</strong>
<hr><br />
<p>Default Color Progress</p>
<div class="ui progress"
data-percent="50">
<div class="bar"></div>
</div>
<p>Specific Color Progress</p>
<div class="ui green progress"
data-percent="50">
<div class="bar"></div>
</div>
</div>
<script>
$('.progress').progress();
</script>
</body>
</html>
Producción:
Variación de color de progreso de la interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra la variación de colores del progreso al poner nombres de colores junto con la clase de progreso . Estos son los diferentes colores que puede usar para diseñar una barra de progreso de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Progress Color Variation</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic-UI Progress Color Variation</strong>
<hr><br />
<div class="ui red progress"
data-percent="10">
<div class="bar"></div>
<div class="label">Red</div>
</div>
<div class="ui orange progress"
data-percent="15">
<div class="bar"></div>
<div class="label">Orange</div>
</div>
<div class="ui yellow progress"
data-percent="20">
<div class="bar"></div>
<div class="label">Yellow</div>
</div>
<div class="ui olive progress"
data-percent="25">
<div class="bar"></div>
<div class="label">Olive</div>
</div>
<div class="ui green progress"
data-percent="30">
<div class="bar"></div>
<div class="label">Green</div>
</div>
<div class="ui teal progress"
data-percent="35">
<div class="bar"></div>
<div class="label">Teal</div>
</div>
<div class="ui blue progress"
data-percent="40">
<div class="bar"></div>
<div class="label">Blue</div>
</div>
<div class="ui violet progress"
data-percent="45">
<div class="bar"></div>
<div class="label">Violet</div>
</div>
<div class="ui purple progress"
data-percent="50">
<div class="bar"></div>
<div class="label">Purple</div>
</div>
<div class="ui pink progress"
data-percent="60">
<div class="bar"></div>
<div class="label">Pink</div>
</div>
<div class="ui brown progress"
data-percent="65">
<div class="bar"></div>
<div class="label">Brown</div>
</div>
<div class="ui grey progress"
data-percent="70">
<div class="bar"></div>
<div class="label">Grey</div>
</div>
<div class="ui black progress"
data-percent="80">
<div class="bar"></div>
<div class="label">Black</div>
</div>
</div>
<script>
$('.progress').progress();
</script>
</body>
</html>
Producción:
Variación de color de progreso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html#color
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA