Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Los estados de los botones de la interfaz de usuario semántica nos ofrecen tantos estados en los botones como activo , deshabilitado y cargando . En este artículo, discutiremos el estado de carga . La variante de estado de carga de los estados del botón de la interfaz de usuario semántica se utiliza para crear un botón de carga.
Estados del botón de interfaz de usuario semántica Clase de estado de carga:
- cargando: Esta clase se usa para crear un botón de carga.
Sintaxis:
<button class="ui loading button">...</button>
El siguiente ejemplo ilustra el estado de carga de los estados del botón de la interfaz de usuario semántica:
Ejemplo: En este ejemplo, crearemos 2 conjuntos de botones que estarán en estado de carga. Un conjunto serán botones normales y el otro par será un botón básico. Se puede aplicar la variante de estados de carga en cualquier tipo de botón.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
.container {
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<strong>
Semantic-UI Button States Loading
</strong>
</center>
<br><br>
<div class="container">
<strong>
Loading State Normal Buttons:
</strong>
<button class="ui red loading button">GFG
</button>
<button class="ui orange loading button">GFG
</button>
<button class="ui yellow loading button">GFG
</button>
<button class="ui olive loading button">GFG
</button>
<button class="ui green loading button">GFG
</button>
<button class="ui teal loading button">GFG
</button>
<br><br>
<strong>Loading State Basic Buttons:</strong>
<button class="ui blue basic loading button">GFG
</button>
<button class="ui violet basic loading button">GFG
</button>
<button class="ui purple basic loading button">GFG
</button>
<button class="ui pink basic loading button">GFG
</button>
<button class="ui brown basic loading button">GFG
</button>
<button class="ui grey basic loading button">GFG
</button>
</div>
</body>
</html>
Producción:
Carga de estados de botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#loading
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA