Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
El menú desplegable de la interfaz de usuario semántica permite al usuario seleccionar un valor de una serie de opciones. Semantic-UI Dropdown nos ofrece 11 tipos de menú desplegable y 3 tipos de encabezado de contenido, divisor e icono. En este artículo, aprenderemos sobre el contenido de Icon.
El contenido del icono desplegable de interfaz de usuario semántica se utiliza para crear un menú desplegable que puede contener un icono para una mejor interfaz.
Clase de contenido del icono desplegable de interfaz de usuario semántica:
- icono: esta clase se utiliza para agregar el icono en el menú desplegable.
Sintaxis:
<div class="ui labeled icon dropdown button">
<i class="...icon"></i>
</div>
El siguiente ejemplo ilustra el icono de contenido desplegable 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" /> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong>Semantic-UI Dropdown Icon Content</strong> <br><br> <div class="ui floating labeled icon dropdown button"> <i class="folder icon"></i> <span class="text">Folder</span> <div class="menu"> <div class="header"> <i class="... icon"></i> ... </div> <div class="divider"></div> <div class="item"> <i class="... icon"></i> ... </div> <div class="item"> <i class="... icon"></i> ... </div> <div class="item"> <i class="... icon"></i> ... </div> </div> </div> </center> </body> </html>
Salida: para que el menú desplegable sea interactivo, debemos agregar la función onclick.
Contenido del icono desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#icon
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA