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 el CSS y jQuery predefinidos para incorporar en diferentes marcos.
El grupo de botones de la interfaz de usuario semántica ofrece el estado del botón, si desea crear un botón Me gusta, suscribirse y seguir, en ese caso se requiere este tipo de botones.
Clase de estados de botón de interfaz de usuario semántica:
- activo : esta clase se utiliza para establecer el estado del botón como activo.
- disabled : esta clase se usa para establecer el estado del botón deshabilitado.
- cargando : esta clase se usa para configurar el estado del botón cargando.
Sintaxis:
<button class="ui "States-Class" button">...</button>
El siguiente ejemplo ilustrará los estados del botón de la interfaz de usuario semántica:
Ejemplo:
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 {
width: 600px;
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>Semantic UI Button States</strong>
</center>
<br><br>
<div class="container">
<strong>Conditionals:</strong>
<button class="ui active button">
<i class="like icon"></i>
Like</button>
<button class="ui disabled button">
<i class="user icon"></i>
Subscribed
</button>
<button class="ui secondary loading button">
Loading
</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA