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 de tipo en línea .
Tipo en línea desplegable de IU semántica:
- en línea: esta clase se utiliza para especificar el tipo de menú desplegable en línea.
Tipo en línea del menú desplegable de IU semántica: para alinear su menú desplegable con contenido particular en su página web, se requiere un menú desplegable de tipo en línea . Puede haber contenido específico relacionado directamente con el menú desplegable. Para hacer el menú desplegable cerca de ese contenido, se usa la clase en línea . Hay muchos escenarios en los que esto podría ser útil.
Sintaxis:
<div class="ui inline dropdown">
... <i class="dropdown icon"></i>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
Para instanciar la función desplegable, usamos la siguiente sintaxis:
<script>
$('.ui.dropdown').dropdown();
</script>
Ejemplo 1: este ejemplo demuestra el tipo en línea desplegable utilizando la clase en línea . Los siguientes ejemplos ilustran el tipo en línea desplegable de IU semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b><p>Semantic UI Dropdown Inline Type</p></b>
<hr>
<br />
<strong>Inline Dropdown:</strong><br /><br />
<span> This is a
<div class="ui inline dropdown">
<span class="text">Dropdown</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
option 1
</div>
<div class="item">
option 2
</div>
<div class="item">
option 3
</div>
<div class="item">
option 4
</div>
<div class="item">
option 5
</div>
</div>
</div>
inline with text .
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Menú desplegable en línea
Ejemplo 2: este ejemplo demuestra el tipo en línea desplegable junto a un texto usando la clase en línea .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<br/><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b><p>Semantic UI Dropdown Inline Type</p></b>
<hr>
<br />
<strong>Inline Dropdown:</strong><br /><br />
<span> Please tell us your favourite Operating System
<i class="desktop icon"></i>
<div class="ui inline dropdown">
<span class="text">Choose here</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
Windows
</div>
<div class="item">
Linux
</div>
<div class="item">
Android
</div>
<div class="item">
Mac OS
</div>
<div class="item">
iOS
</div>
</div>
</div>
</span>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Menú desplegable en línea
Referencia: https://semantic-ui.com/modules/dropdown.html#inline
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA