Semantic UI es un marco de código abierto que nos ofrece clases especiales para crear interfaces de usuario sorprendentes y receptivas. Hace uso de jQuery y CSS para crear interfaces de usuario agradables que son muy parecidas a bootstrap. Tiene muchas clases que se utilizan para diseñar diferentes elementos en la estructura de la página web HTML. En este artículo, aprenderemos sobre la variación de desplazamiento desplegable de la interfaz de usuario semántica.
Los menús desplegables son uno de los métodos de entrada más utilizados en una página web. La interfaz de usuario semántica proporciona clases dedicadas para el formato del contenido desplegable. Un menú desplegable de desplazamiento es un caso especial del menú desplegable en el que se puede desplazar el menú desplegable. Es muy útil en casos donde los elementos desplegables son grandes en número. Para crear un menú desplegable de desplazamiento, usamos la clase de desplazamiento en el div principal. Esto hace que el menú desplegable completo se pueda desplazar, lo que significa que el menú desplegable al principio solo mostrará las 6 opciones principales y, al desplazarse, mostrará todos los elementos.
Clase de variación de desplazamiento desplegable de interfaz de usuario semántica:
- desplazamiento: esta clase se utiliza para hacer que el menú desplegable se pueda desplazar.
Sintaxis:
<div class="ui scrolling dropdown"> ... </div>
Para instanciar la función desplegable, usamos la siguiente sintaxis:
Sintaxis:
<script>
$('.ui.dropdown').dropdown();
</script>
Ejemplo: Este es un ejemplo que muestra el menú desplegable de IU semántica normal y el menú desplegable de IU semántica desplazable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui dropdown">
<div class="text">
Normal DropDown
</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<div class="ui scrolling dropdown">
<div class="text">
Scrolling DropDown
</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Producción
Nota: Los menús desplegables de desplazamiento son incompatibles con el uso del submenú.
Referencia: https://semantic-ui.com/modules/dropdown.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA