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 en diferentes marcos.
Los estados activos 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. Un botón puede mostrar que actualmente es la selección de usuario activa
Clase de estados activos del botón de interfaz de usuario semántica:
- active: esta clase se utiliza para establecer el estado del botón como activo.
Sintaxis:
<button class="ui active button">
.......
</button>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de los estados activos del botón de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Button Active State</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<style>
button {
width: 150px;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>
Semantic-UI Button Active States
</strong>
<br><br>
<div class="container">
<strong>Button Active States:</strong>
<button class="ui active button">
<i class="like icon"></i>
Like
</button>
<button class="ui active button">
<i class="share icon"></i>
share
</button>
<button class="ui active button">
<i class="trash icon"></i>
trash
</button>
</div>
</center>
</body>
</html>
Producción:
Estados activos del botón de interfaz de usuario semántica
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de los estados activos del botón de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Button Active States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<style>
button {
width: 150px;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>
Semantic-UI Button Active States
</strong>
<br><br>
<div class="container">
<strong>Button Active States:</strong>
<button class="ui active button">
<i class="like icon"></i>
Like
</button>
<button class="ui active button">
<i class="share icon"></i>
share
</button>
<button class="ui active button">
<i class="trash icon"></i>
trash
</button>
<br><br>
<strong>
Basic Button Active States:
</strong>
<button class="ui active basic button">
<i class="like icon"></i>
Like
</button>
<button class="ui active basic button">
<i class="share icon"></i>
share
</button>
<button class="ui active basic button">
<i class="trash icon"></i>
trash
</button>
</div>
</center>
</body>
</html>
Producción:
Estados activos del botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#active
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA