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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Desplegable». Los menús desplegables se utilizan para mostrar diferentes opciones a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes tipos de menús desplegables. Uno de ellos es sencillo .
Tipo simple desplegable de IU semántica: Para usar diferentes variaciones y tipos de menús desplegables, necesitamos agregar un script. Sin embargo, si el usuario solo necesita un menú desplegable para abrir según su uso, se requiere agregar un menú desplegable simple sin script. Un menú desplegable simple solo mostrará su menú sin JavaScript. No puede seleccionar ningún valor. Se puede usar en plantillas y UI de maquetas para describir un menú.
Clase de tipo simple desplegable de IU semántica:
- simple: esta clase se usa para especificar el tipo simple de menú desplegable.
Sintaxis:
<div class="ui simple dropdown">
... <i class="dropdown icon"></i>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra el tipo simple desplegable de la interfaz de usuario semántica. Este ejemplo demuestra el tipo simple desplegable usando la clase simple . Como se muestra en la imagen a continuación, el usuario puede abrir el menú desplegable y ver todas las opciones de menú disponibles. No puede seleccionar ninguna opción ya que no se agrega ningún script.
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> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Dropdown Simple Type</p> </b> <hr> <br /> <strong>Simple Dropdown:</strong><br /><br /> <div class="ui compact menu"> <div class="ui simple dropdown item"> <i class="user circle icon"></i> Access <i class="dropdown icon"></i> <div class="menu"> <div class="item">Public</div> <div class="item">Private</div> <div class="item">Protected</div> </div> </div> </div> </div> </body> </html>
Producción:
Menú desplegable sencillo
Ejemplo 2: este ejemplo demuestra el tipo simple desplegable usando la clase simple . Puede ver todas las opciones como se muestra en la imagen a continuación.
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> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Dropdown Simple Type</p> </b> <hr> <br /> <strong>Simple Dropdown:</strong><br /><br /> <span> Click to view all Javascripts frameworks <div class="ui simple inline dropdown"> <span class="text">JS Frameworks</span> <i class="dropdown icon"></i> <div class="menu"> <div class="item">REACT</div> <div class="item">ANGULAR</div> <div class="item">VUE</div> <div class="item">EMBER</div> <div class="item">BACKBONE</div> </div> </div> </span> </div> </body> </html>
Producción:
Menú desplegable sencillo
Referencia: https://semantic-ui.com/modules/dropdown.html#simple
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA