Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que Bootstrap para su uso y tiene diferentes elementos para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Botones». Los botones se utilizan para permitir a los usuarios realizar diferentes acciones a través de una acción de clic. Los usuarios pueden hacer clic según su elección. Hay diferentes variaciones de botones según su forma y estilo. Uno de ellos es la variación de alternancia. La variación de alternancia del botón de la interfaz de usuario semántica se usa para hacer que el botón tenga la forma de una alternancia que el usuario puede usar para seleccionar un valor verdadero o falso. Agrega un aspecto diferente al botón predeterminado.
Clase de variación de alternancia de botón de interfaz de usuario semántica:
- alternar: esta clase se utiliza para mostrar el botón en forma de alternar.
Sintaxis:
<button class="ui toggle button">.....</button>
Estos ejemplos demuestran la variación de alternancia del botón utilizando la clase de alternancia .
Ejemplo 1:
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>
<br /><br />
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Button Toggle Variation</p>
</b>
<hr>
<br />
<strong>Toggle button: </strong>
<br /><br />
<button class="ui toggle button"
id="suscribe">
Toggle OFF
</button>
<script>
$('#suscribe').click(function () {
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).text("Toggle ON");
}
else {
$(this).text("Toggle OFF");
}
});
</script>
</div>
</body>
</html>
Producción :
Variaciones de alternancia del botón de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Button Toggle Variations</title>
<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>
<br /><br />
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Button Toggle Variation</p>
</b>
<hr>
<br />
<strong>Toggle Button:</strong>
<br /><br />
<button class="ui toggle button" id="suscribe">
Subscribed to GFG weekly newsletters
</button>
<script>
$('#suscribe').click(function () {
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).text("Subscribed to GFG weekly newsletters");
}
else {
$(this).text("Subscribe to GFG weekly newsletters");
}
});
</script>
</div>
</body>
</html>
Producción:
Variaciones de alternancia del botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#toggle
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA