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 variaciones de menús desplegables según la dirección del menú y la forma en que se muestra.
Variación compacta del menú desplegable de la IU semántica: es posible que el usuario deba establecer el ancho del menú desplegable según la selección realizada. Aquí es cuando la variación compacta es útil. No hay un ancho mínimo para este menú desplegable. El ancho del menú desplegable cambia a medida que el usuario realiza su selección. No hay un ancho fijo y ayuda a configurar el ancho automáticamente según la elección del usuario.
Clase de variación compacta desplegable de IU semántica:
- compacto: esta clase se utiliza para especificar la variación compacta del menú desplegable.
Sintaxis:
<div class="ui compact dropdown">
...
</div>
Para instanciar la función desplegable, use la siguiente sintaxis.
<script>
$('.ui.dropdown').dropdown();
</script>
Ejemplo 1: Este ejemplo demuestra las potencias de 10 a través de la variación compacta desplegable usando la clase compacta . Puede ver que a medida que el usuario elige potencias menores de 10, el ancho del menú desplegable sigue disminuyendo.
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 Compact Variation</p>
</b>
<hr><br />
<strong>Compact Dropdown:</strong>
<br /><br />
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Powers of 10</div>
<div class="menu">
<div class="item">100000000</div>
<div class="item">1000000</div>
<div class="item">10000</div>
<div class="item">100</div>
<div class="item">1</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción :
Menú desplegable compacto
Ejemplo 2: este ejemplo demuestra la variación compacta desplegable utilizando la clase compacta . Puede ver que a medida que el usuario elige el texto del cuadro de selección, el ancho del menú desplegable sigue cambiando según el ancho del texto.
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 Compact Variation</p>
</b>
<hr><br />
<strong>Compact Dropdown:</strong>
<br /><br />
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Select the width</div>
<div class="menu">
<div class="item">
<p>
CSS (Cascading Style Sheets) is a
stylesheet language used to
design the webpage.
</p>
</div>
<div class="item">
<p>
Web Technology refers to the various
tools and techniques that are utilized
in the process of communication
</p>
</div>
<div class="item">
<p>HTML stands for HyperText Markup Language.</p>
</div>
<div class="item">
<p>
jQuery is an open-source JavaScript library
that simplifies the interactions between an
HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
</p>
</div>
<div class="item">
<p>Document Object Model (DOM)</p>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dropdown.html#compact
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA