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 el componente 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 variaciones de menús desplegables según la dirección del menú y la forma en que se muestra. Puede agregar direcciones al menú desplegable. Veamos esta variación del menú desplegable.
Variación de la dirección del menú desplegable de la interfaz de usuario semántica: puede dirigir todos los menús y submenús para que se abran en una dirección específica según el requisito. Esta variación se usa para personalizar un menú desplegable en una dirección específica.
Clase de variación de dirección del menú desplegable de IU semántica:
- izquierda: esta clase se utiliza para colocar el menú en la dirección izquierda.
- right: Esta clase se usa para colocar el menú en la dirección correcta.
Sintaxis:
<div class="ui dropdown">
...
<i class="dropdown icon"></i>
<div class="Direction-Variation-Class menu">
....
</div>
</div>
Para instanciar la función desplegable, usamos la siguiente sintaxis:
<script>
$('.ui.dropdown').dropdown();
</script>
Ejemplo 1: Este ejemplo demuestra la variación dirigida por menú. Muestra el menú en ambas direcciones.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 />
<h2 class="ui header green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Menu Direction
Dropdown Variation</p>
</b>
<br /><br />
<div style="margin-left: 240px;">
<div class="ui floating labeled
icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Content</span>
<div class="right menu">
<div class="item">Courses
<i class="dropdown icon"></i>
<div class="right menu">
<div class="item">React</div>
<div class="item">Angular</div>
<div class="item">Vue</div>
</div>
</div>
<div class="item">Tests</div>
<div class="item">Articles</div>
</div>
</div>
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">Profile</span>
<div class="left menu">
<div class="item">
<i class="left dropdown icon"></i>
<span class="text">
Security
</span>
<div class="left menu">
<div class="item">
Reset Password
</div>
<div class="item">
Log Out
</div>
</div>
</div>
<div class="item">
Change Photo
</div>
<div class="item">
Update Details
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Variación de la dirección del menú desplegable de la interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra la variación dirigida por menú. Muestra todos los menús en la dirección correcta.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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 />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Menu Direction Dropdown Variation</p>
</b><br />
<div class="ui floating labeled icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Algorithms</span>
<div class="right menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Trees</span>
<div class="right menu">
<div class="item">Inorder</div>
<div class="item">Preorder</div>
<div class="item">Postorder</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Arrays</span>
<div class="right menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">
Sorts
</span>
<div class="right menu">
<div class="item">
Bubble Sort
</div>
<div class="item">
Quick Sort
</div>
<div class="item">
Insertion Sort
</div>
</div>
</div>
<div class="item">
Binary Search
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Variación de la dirección del menú desplegable de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#menu-direction
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA