Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap. En este artículo, veamos los botones detipos de iconos etiquetados .
La interfaz de usuario semántica proporciona varias clases con botones para personalizar. En este artículo, veremos los botones de tipos de iconos etiquetados. La clase de icono etiquetado debe mencionarse cuando queremos usar botones de tipo icono etiquetado. Los botones de iconos etiquetados van acompañados de las etiquetas.
Botón de interfaz de usuario semántica etiquetado como clase de tipo de icono:
- etiquetado: esta clase se utiliza para hacer el botón etiquetado.
- icon: esta clase se utiliza para establecer el icono del botón.
Sintaxis:
<button class="ui labeled-icon-class button">
...
</button>
Ejemplo 1: El siguiente ejemplo muestra los botones con el tipo de icono etiquetado.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header"> Geeksforgeeks </h1> <strong> Semantic UI Button Types Label </strong> <br /><br /> <div class="ui left labeled icon button"> <i class="left arrow icon"></i> Previous </div> <div class="ui right labeled icon button"> <i class="right arrow icon"></i> Next </div> </center> </body> </html>
Producción:
Tipo de icono con etiqueta de botón de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra los botones con el tipo de icono etiquetado .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header">Geeksforgeeks</h1> <strong>Semantic UI Button Types Label</strong> <br /><br /> <div style="margin-top:10px" class="ui left labeled button"> <a class="ui green basic right pointing label"> 100 </a> <div class="ui green icon button"> <i class="thumbs up icon"></i> Like </div> </div> <div class="ui left labeled button"> <a class="ui red basic right pointing label"> 2 </a> <div class="ui red icon button"> <i class="thumbs down icon"></i> Dislike </div> </div> <div class="ui left labeled button"> <a class="ui blue basic right pointing label"> 5 </a> <div class="ui blue icon button"> <i class="share square icon"></i> Shares </div> </div> </center> </body> </html>
Producción:
Tipo de icono con etiqueta de botón de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#labeled-icon
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA