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 según la dirección del menú y la forma en que se muestra. Puede agregar un puntero en el menú desplegable. Veamos este tipo de desplegable.
Tipo de puntero desplegable de la interfaz de usuario semántica: El puntero apuntará el menú en la dirección opuesta a la que aparece. Hay diferentes tipos de posiciones en las que se puede colocar un puntero. Las posiciones son inferior izquierda, inferior, inferior derecha, izquierda, derecha, superior izquierda, superior y superior derecha.
Clase de tipo de puntero desplegable de IU semántica:
- apuntando: Esta clase se usa para hacer que el menú apunte en una dirección específica.
Sintaxis:
<div class="pointing dropdown">
....
</div>
Para instanciar la función desplegable, usamos la siguiente sintaxis:
<script>
$('.ui.dropdown').dropdown();
</script>
Ejemplo 1: este ejemplo demuestra el tipo de puntero desplegable utilizando la clase de puntero . Puede ver todos los menús desplegables de punteros 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" />
<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 Pointing Type</p>
</b>
<hr><br />
<strong> Pointing Dropdowns:</strong>
<br /><br />
<center>
<div class="ui bottom left pointing dropdown button">
<span class="text">Dropdown 1</span>
<div class="menu">
<div class="header">
Bottom Left pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<div class="ui bottom pointing dropdown button">
<span class="text">Dropdown 2</span>
<div class="menu">
<div class="header">
Bottom pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<div class="ui bottom right
pointing dropdown button">
<span class="text">Dropdown 3</span>
<div class="menu">
<div class="header">
Bottom Right pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<br /><br />
<div class="ui right pointing dropdown button"
style="margin-right: 65px;">
<span class="text">Dropdown 4</span>
<div class="menu">
<div class="header">Right pointing dropdown</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<div class="ui left pointing dropdown button"
style="margin-left: 65px;">
<span class="text">Dropdown 5</span>
<div class="menu">
<div class="header">
Left pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<br /><br />
<div class="ui top left pointing dropdown button">
<span class="text">Dropdown 6</span>
<div class="menu">
<div class="header">
Top left pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<div class="ui top pointing dropdown button">
<span class="text">Dropdown 7</span>
<div class="menu">
<div class="header">
Top pointing dropdown</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<div class="ui top right pointing dropdown button">
<span class="text">Dropdown 8</span>
<div class="menu">
<div class="header">
Top Right pointing dropdown
</div>
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Señalando menús desplegables
Ejemplo 2: este ejemplo demuestra el tipo de puntero desplegable utilizando la clase de puntero . Puede ver todos los menús desplegables de punteros 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" />
<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 Pointing Type</p>
</b>
<hr><br />
<strong> Choose your road and path:</strong>
<br /><br />
<center>
<div class="ui bottom pointing dropdown button">
<span class="text">North Road</span>
<div class="menu">
<div class="header">Bottom pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui right pointing dropdown button"
style="margin-right:65px;">
<span class="text">Right Road</span>
<div class="menu">
<div class="header">Right pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<div class="ui left pointing dropdown button" s
tyle="margin-left:65px;">
<span class="text">Left Road</span>
<div class="menu">
<div class="header">Left pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
<br /><br />
<div class="ui top pointing dropdown button">
<span class="text">South Road</span>
<div class="menu">
<div class="header">Top pointing dropdown</div>
<div class="item">Path 1</div>
<div class="item">Path 2</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</div>
</body>
</html>
Producción:
Señalando menús desplegables
Referencia: https://semantic-ui.com/modules/dropdown.html#pointing
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA