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.
Los estados deshabilitados del botón de la IU semántica son uno de los 3 estados de los estados del botón de la IU semántica. Esta clase se utiliza para establecer el estado del botón como activo.
Botón de interfaz de usuario semántica Clase de estados deshabilitados:
- disabled: esta clase se utiliza para establecer el estado del botón deshabilitado.
Sintaxis:
<button class="ui disabled button"> ... </button>
El siguiente ejemplo ilustra los estados deshabilitados del botón de la interfaz de usuario semántica:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 150px;
}
.container {
margin-left: 10%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">
Geeksforgeeks
</h1>
<strong>
Semantic-UI Button Disabled States
</strong>
</center>
<br><br>
<div class="container">
<strong>Button Disabled States:</strong>
<button class="ui disabled button">
<i class="like icon"></i>
Like
</button>
<button class="ui disabled button">
<i class="share icon"></i>
share
</button>
<button class="ui disabled button">
<i class="trash icon"></i>
trash
</button>
</div>
</body>
</html>
Producción:
Estados deshabilitados del botón de la interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 150px;
}
.container {
margin-left: 10%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>Semantic-UI Button Disabled States</strong>
</center>
<br><br>
<div class="container">
<strong>Basic Button Disabled States:</strong>
<button class="ui disabled basic button">
<i class="like icon"></i>
Like
</button>
<button class="ui disabled basic button">
<i class="share icon"></i>
share
</button>
<button class="ui disabled basic button">
<i class="trash icon"></i>
trash
</button>
</div>
</body>
</html>
Producción:
Estados deshabilitados del botón de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#disabled
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA