Bulma es un marco CSS rico en componentes, moderno y liviano que se basa en flexbox . Ayuda a construir interfaces web hermosas y receptivas de manera más fácil y rápida. En este artículo, veremos qué tipo de contenido se puede usar dentro de un componente desplegable en Bulma.
Por lo tanto, una etiqueta <a> se puede usar directamente como elemento desplegable, pero también podemos usar un elemento <div> como elemento desplegable y llenar el elemento div con el contenido que deseemos. Por ejemplo párrafos, enlaces, botones, etc.
Clases de contenido desplegable de Bulma:
- elemento desplegable: esta clase representa un solo elemento dentro del menú desplegable. Puede ser una etiqueta <a> o un elemento <div> .
- dropdown-divider: esta clase se usa para hacer una línea horizontal llamada divisor para separar los elementos desplegables si es necesario.
Sintaxis:
<div class="dropdown-content">
<div class="dropdown-item">
...
</div>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">...</a>
</div>
Ejemplo: El siguiente ejemplo muestra cómo podemos usar los elementos <a> y <div> como elementos desplegables.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown Content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.container{
margin-top: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma Dropdown Content</b>
<div class="container is-fluid">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
aria-controls="dropdown-menu1">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu1" role="menu">
<div class="dropdown-content">
<!-- div containing a paragraph -->
<div class="dropdown-item">
<p>This is a paragraph inside a
<code>div</code> element.
</p>
</div>
<!-- Divider -->
<div class="dropdown-divider"></div>
<!-- div containing buttons -->
<div class="dropdown-item">
<button class="button is-small
is-success">
GeeksforGeeks
</button>
</div>
<!-- Divider -->
<div class="dropdown-divider"></div>
<!-- <a> as dropdown item -->
<a href="https://www.geeksforgeeks.org"
class="dropdown-item">
Go to Home Page.
</a>
</div>
</div>
</div>
</div>
<!-- JavaScript for opening and closing of dropdown -->
<script>
var triggers =
document.querySelectorAll(".dropdown .dropdown-trigger");
triggers.forEach(function (trigger) {
var isopen = false;
trigger.addEventListener('click', function(){
if(isopen){
trigger.parentElement.classList.remove("is-active");
isopen = false;
}else{
trigger.parentElement.classList.add("is-active");
isopen = true;
}
})
});
</script>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/dropdown/#dropdown-content