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.
El contenido del botón de la interfaz de usuario semántica ofrece condiciones entre botones como eliminar o guardar, cancelar o aceptar y sí o no. Para eso, necesitaremos usar un elemento div entre dos botones que contienen una clase «o» y uno de los botones debe contener un positivo. clase. Este tipo de botones siempre están en un grupo, por lo que se requiere conocimiento sobre el grupo de botones de IU semántica.
Clase de contenido de botón de interfaz de usuario semántica:
- o: Esta clase se usa para crear condiciones entre dos botones.
- positivo: esta clase se usa para crear el botón en modo positivo (color verde).
Sintaxis:
<div class="ui buttons"> <button class="ui button">...</button> <div class="or"></div> <button class="ui button">...</button> </div>
El siguiente ejemplo ilustrará el contenido 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: 20%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>Semantic UI Button Content</strong>
</center>
<br><br>
<div class="container">
<strong>Conditionals:</strong>
<div class="ui buttons">
<div class="ui buttons">
<button class="ui button">Yes</button>
<div class="or"></div>
<button class="ui positive button">No</button>
</div>
</div>
</body>
</html>
Producción:
Contenido del botón de interfaz de usuario semántica
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA