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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente de progreso. El progreso se utiliza para magnificar el progreso de una tarea en particular. Dependiendo de los requisitos del uso del progreso, hay diferentes estados del mismo. Uno de ellos es el estado de discapacidad.
Es posible que el usuario deba mostrar el progreso deshabilitado de forma predeterminada. Es posible que el usuario deba mostrar algún progreso en la interfaz de usuario cuyos valores no deben cambiarse o la persona no tiene acceso para interactuar con él. Hay ciertas condiciones en las que el progreso se deshabilita si se completa i. En ese caso, un estado deshabilitado es útil.
Progreso de la interfaz de usuario semántica Clase de estado deshabilitada:
- disabled: esta clase se utiliza para especificar el estado de progreso deshabilitado.
Sintaxis:
<div class="ui disabled progress"> <div class="bar"></div> ... </div>
Estos ejemplos demuestran el progreso o grupo de progreso en un estado deshabilitado mediante el uso de la clase deshabilitada .
Ejemplo 1 :
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>
<br><br>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>
Semantic-UI Progress Disabled State
</strong>
<br><br>
</center>
<div class="ui container">
<div class="ui disabled progress"
data-percent="100"
id="eg">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Files downloaded</div>
</div>
</div>
<script>
$('#eg').progress();
</script>
</body>
</html>
Salida :
Estado deshabilitado del progreso de la interfaz de usuario semántica
Ejemplo 2:
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>
<div class="ui container">
<br><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic-UI Progress Disabled State</strong>
<hr>
<br>
<div class="ui red disabled progress"
data-percent="15">
<div class="bar"></div>
<div class="label">Red</div>
</div>
<div class="ui orange disabled progress"
data-percent="30">
<div class="bar"></div>
<div class="label">Orange</div>
</div>
<div class="ui yellow disabled progress"
data-percent="45">
<div class="bar"></div>
<div class="label">Yellow</div>
</div>
<div class="ui blue disabled progress"
data-percent="60">
<div class="bar"></div>
<div class="label">Blue</div>
</div>
</div>
<script>
$('.progress').progress();
</script>
</body>
</html>
Producción:
Estado deshabilitado del progreso de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/progress.html#disabled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA