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 Labeled es uno de los tipos de botones más importantes de Semantic-UI Button Types . En este artículo, aprenderemos sobre el tipo Etiquetado de botón de interfaz de usuario semántica.
Clase de tipo con etiqueta de botón de interfaz de usuario semántica:
- rotulado: Sirve para añadir una etiqueta a nuestro botón.
Sintaxis:
<div class="ui left labeled button"> ... </div>
Los siguientes ejemplos ilustran el tipo etiquetado de botón de interfaz de usuario semántica:
Ejemplo 1: En este ejemplo, crearemos un botón de etiqueta sin color.
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: 150px;
}
div {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic-UI Button Labeled Types</strong>
</center>
<br><br>
<div>
<strong>Labeled:</strong>
<div class="ui labeled button">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic left pointing label">
2,048
</a>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
2,048
</a>
<div class="ui button">
<i class="user icon"></i>Follower
</div>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
1,048
</a>
<div class="ui icon button">
<i class="fork icon"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Tipo etiquetado de botón de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, crearemos un botón de etiqueta con color.
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: 150px;
}
div {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic-UI Button Labeled Types</strong>
</center>
<br><br>
<div>
<strong>Labeled:</strong>
<div class="ui labeled button" tabindex="0">
<div class="ui red button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic left pointing label">
2,048
</a>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
2,048
</a>
<div class="ui button">
<i class="user icon"></i>Follower
</div>
</div>
<div class="ui left labeled button">
<a class="ui basic right pointing label">
1,048
</a>
<div class="ui icon blue button">
<i class="fork icon"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Tipo etiquetado de botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#labeled
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA