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 icono de interfaz de usuario semántica es un glifo que se usa para representar algo. Los íconos se pueden usar para mostrar mensajes especiales, como un botón, peligro, etc. Los íconos tienen un significado general y, por lo tanto, se usan ampliamente. El estado Semantic UI Icon Disabled demuestra que cualquier opción o enlace con el que está vinculado el icono está deshabilitado. Se desvanece el color del icono.
Icono de interfaz de usuario semántica Clases de estado deshabilitadas:
- disabled: esta clase se utiliza para desactivar el icono aquí.
Sintaxis:
<i class="... icon disabled"> </i>
El siguiente ejemplo ilustra la variante flotante de variaciones de estadísticas de interfaz de usuario semántica:
Ejemplo: En el siguiente ejemplo, estamos alternando la clase de ícono de código usando el elemento de botón usando la clase deshabilitada .
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">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Semantic-UI Icon Disabled State</h2>
<h4>Code</h4>
<i class="code huge circular icon"
id="codeIcon"></i>
<div>
<button class="ui button"
onclick="toggleDisable()">
Enable/Disable Code Icon
</button>
</div>
</center>
</div>
<script>
function toggleDisable(){
$("#codeIcon").toggleClass("disabled");
}
</script>
</body>
</html>
Producción:
Icono de interfaz de usuario semántica Estado deshabilitado
Referencia: https://semantic-ui.com/elements/icon.html#disabled
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA