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 grupo de botones de interfaz de usuario semántica también ofrece una variación de grupo de botones, hay botones de icono, botones de icono etiquetados, botones de grupo mixto, ancho igual, botones de colores, botones básicos, botones de tamaño de grupo, etc.
Clases de variaciones del grupo de botones de la interfaz de usuario semántica:
- Botones verticales : esta clase se utiliza para establecer grupos de botones formateados para aparecer verticalmente.
- Botones de iconos : esta clase se utiliza para establecer grupos de botones formateados como iconos.
- Botones de iconos etiquetados : esta clase se utiliza para establecer grupos de botones formateados como iconos etiquetados.
- Grupo mixto : esta clase se usa para establecer grupos de botones formateados para usar varios tipos de botones juntos.
- Ancho igual : esta clase se usa para establecer grupos de botones que pueden tener sus anchos divididos uniformemente.
- Botones de colores : esta clase se utiliza para establecer grupos de botones que pueden tener un color compartido.
- Botones básicos : esta clase se usa para establecer grupos de botones que pueden ser menos pronunciados.
- Tamaños de grupo : esta clase se utiliza para establecer grupos de botones que pueden tener un tamaño compartido.
Sintaxis:
<div class="ui Group-Variations-Class">
<button class="ui button">...</button>
<! this is where you want to use icons>
<button class="ui button">
<i class="...."></i>
</button>
</div>
El siguiente ejemplo ilustrará las variaciones del grupo de botones de la interfaz de usuario semántica:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Button Group Variations</strong>
</center>
<br><br>
<div class="container">
<div>
<strong>Vertical Buttons:</strong>
<div class="ui vertical buttons">
<button class="ui button">Feed</button>
<button class="ui button">Messages</button>
<button class="ui button">Events</button>
</div>
</div>
<br>
<div>
<strong>Icon Buttons:</strong>
<div class="ui icon buttons">
<button class="ui button">
<i class="like red icon"></i>
</button>
<button class="ui button">
<i class="pause green icon"></i>
</button>
<button class="ui button">
<i class="share blue icon"></i>
</button>
</div>
</div>
<br>
<div>
<strong>Labeled Icon Buttons:</strong>
<div class="ui vertical labeled icon buttons">
<button class="ui red button">
<i class="like icon"></i>
Like
</button>
<button class="ui green button">
<i class="play icon"></i>
Play
</button>
<button class="ui blue button">
<i class="shuffle icon"></i>
Shuffle
</button>
</div>
</div>
<br>
<div>
<strong>Mixed Group:</strong>
<div class="ui green buttons">
<button class="ui labeled icon button">
<i class="left chevron icon"></i>
Previous
</button>
<button class="ui button">
<i class="play icon"></i>
Play
</button>
<button class="ui right labeled icon button">
Next
<i class="right chevron icon"></i>
</button>
</div>
</div>
</div>
</body>
</html>
Producción:
Variaciones del grupo de botones de la interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
margin-right: 10%;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Button Group Variations</strong>
</center>
<br><br>
<div class="container">
<div>
<strong>Equal Width:</strong><br>
<div class="three ui buttons">
<button class="ui red button">
Like
</button>
<button class="ui yellow button">
Share
</button>
<button class="ui purple button">
Subscribe
</button>
</div>
<div class="two ui buttons">
<button class="ui blue button">
Sell
</button>
<button class="ui green button">
Buy
</button>
</div>
</div>
<br>
<div>
<strong>Colored Buttons:</strong>
<div class="ui green buttons">
<button class="ui button">
Like
</button>
<button class="ui button">
Share
</button>
<button class="ui button">
Subscribe
</button>
</div>
</div>
<br>
<div>
<strong>Basic Buttons:</strong>
<div class="ui basic buttons">
<button class="ui button">
Like
</button>
<button class="ui button">
Share
</button>
<button class="ui button">
Subscribe
</button>
</div>
</div>
<br>
<div>
<strong>Group Sizes:</strong>
<br>
<div class="ui small blue buttons">
<button class="ui button">
Small Like
</button>
<button class="ui button">
Small Share
</button>
<button class="ui button">
Small Subscribe
</button>
</div>
<br><br>
<div class="ui large green buttons">
<button class="ui button">
large Like
</button>
<button class="ui button">
large Share
</button>
<button class="ui button">
large Subscribe
</button>
</div>
</div>
<br>
</div>
</body>
</html>
Producción:
Variaciones del grupo de botones
Referencia: https://semantic-ui.com/elements/button.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA