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.
Semantic-UI Button Variations nos ofrece tantas variaciones en botones como botones sociales, de tamaño, flotantes, de color, compactos, de alternancia, positivos, negativos, fluidos, circulares, verticales y horizontales adjuntos. Aquí en este artículo, discutiremos la variación flotante. El tamaño de las variaciones del botón de la interfaz de usuario semántica se utiliza para crear botones de diferentes tamaños en diferentes lados.
Clase de variante de tamaño de variaciones de botón de interfaz de usuario semántica:
- mini: esta clase se utiliza para crear un botón de tamaño mini.
- tiny: esta clase se utiliza para crear un botón de tamaño minúsculo.
- pequeño: esta clase se utiliza para crear un botón de tamaño pequeño.
- medium: esta clase se utiliza para crear un botón de tamaño mediano.
- grande: esta clase se utiliza para crear un botón de gran tamaño.
- big: esta clase se utiliza para crear un botón de gran tamaño.
- enorme: esta clase se utiliza para crear un botón de gran tamaño.
- masivo: esta clase se utiliza para crear un botón de tamaño masivo.
Sintaxis:
<button class="Size-Variant-class ui button"> ... </button>
El siguiente ejemplo ilustra las variaciones de tamaño del botón de la interfaz de usuario semántica:
Ejemplo: el siguiente ejemplo ilustra la variante de tamaño de las variaciones del botón de la interfaz de usuario semántica.
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>
.container {
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic-UI Button Variations Size Variant</strong>
</center>
<br><br>
<div class="container">
<strong>Size Variant Normal buttons:</strong>
<br>
<button class="mini ui blue button">
Mini Button
</button>
<button class="tiny ui blue button">
Tiny Button
</button>
<button class="small ui blue button">
Small Button
</button>
<button class="medium ui blue button">
Medium Button
</button>
<button class="large ui blue button">
Large Button
</button>
<button class="big ui blue button">
Big Button
</button>
<button class="huge ui blue button">
Huge Button
</button>
<button class="massive ui blue button">
Massive Button
</button>
<br><br>
<strong>Size Variant Normal buttons:</strong>
<br>
<button class="mini ui blue basic button">
Mini Button
</button>
<button class="tiny ui blue basic button">
Tiny Button
</button>
<button class="small ui blue basic button">
Small Button
</button>
<button class="medium ui blue basic button">
Medium Button
</button>
<button class="large ui blue basic button">
Large Button
</button>
<button class="big ui blue basic button">
Big Button
</button>
<button class="huge ui blue basic button">
Huge Button
</button>
<button class="massive ui blue basic button">
Massive Button
</button>
</div>
</body>
</html>
Producción:
Variaciones de los botones de la interfaz de usuario semántica Variación de tamaño
Referencia: https://semantic-ui.com/elements/button.html#size
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA