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.
El menú desplegable de la interfaz de usuario semántica es un elemento de entrada que se utiliza para dar a los usuarios un número finito de opciones para seleccionar la respuesta. Hay muchas variaciones del menú desplegable de la interfaz de usuario semántica, como variaciones de desplazamiento, compactas y fluidas. En este artículo, aprenderemos sobre la variación fluida desplegable de la interfaz de usuario semántica.
Variación fluida del menú 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 fluido es un caso especial del menú desplegable donde el elemento desplegable puede ocupar todo el ancho de su padre. Para crear un menú desplegable fluido, usamos la clase «fluido» en el div principal. La clase «fluido» hace que el menú desplegable completo sea fluido, lo que significa que el menú desplegable y todos sus elementos ocuparán todo el espacio disponible.
Clases desplegables de fluidos de interfaz de usuario semántica:
- fluido: la clase de fluido se usa para convertir el menú desplegable de IU semántica en un menú desplegable fluido de IU semántica.
Sintaxis:
<div class="ui fluid selection dropdown">
<div class="text">Title of Dropdown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Dropdown items</div>
...
</div>
</div>
</div>
Ejemplo: El siguiente ejemplo cubre el menú desplegable de IU semántica normal y el menú desplegable de IU semántica fluida.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 style="color: green;">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown Fluid Variation</strong><br/>
<div class="ui selection dropdown">
<div class="text">Semantic UI Normal Dropdown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</div>
<div class="ui fluid selection dropdown">
<div class="text">Semantic UI Fluid Dropdown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</div>
</center>
<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:
Ejemplo 2: El siguiente ejemplo cubre la representación del menú desplegable Fluido de la interfaz de usuario semántica en un menú vertical anidado.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 style="color: green;">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown Fluid Variation</strong><br/>
<div class="ui vertical menu">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
<div class="ui item">
<div class="ui fluid selection dropdown">
<div class="text">Fluid DropDown</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">1</div>
<div class="item">2</div>
</div>
</div>
</div>
</div>
</center>
<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:
Referencia: https://semantic-ui.com/modules/dropdown.html#fluid
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA