Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El componente desplegable es un contenedor para un botón desplegable y un menú desplegable. Usando desplegable y sus subclases, se puede implementar un menú desplegable interactivo. El componente desplegable incluye varios otros componentes que se pueden agregar para diseñar el contenido. Estos componentes se enumeran a continuación:
- dropdown-trigger: es el contenedor del botón desplegable.
- menú desplegable: es el contenedor para el menú conmutable. Está oculto por defecto.
- dropdown-content: Es el cuadro desplegable. Tiene el fondo blanco con sombra.
- dropdown-item: Representa cada elemento del menú desplegable.
- dropdown-divider: Es la línea horizontal separadora entre los dos elementos.
- dropdown-content: Es el cuadro desplegable. Tiene el fondo blanco con sombra.
Ejemplo 1: Este ejemplo muestra la creación de un menú desplegable simple usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- Custom css -->
<style>
div.columns {
margin-top: 80px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Todos</span>
<span class="icon is-small">
<i class="fas fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Design a custom database to
store your daily activity
</a>
<a href="#" class="dropdown-item">
Take pictures of beautiful flowers
</a>
<a href="#" class="dropdown-item">
Ride to a horse and
write your experience
</a>
<a href="#" class="dropdown-item">
Go for a trip with bike
</a>
<a href="#" class="dropdown-item">
Design a custom database to
store your daily activity
</a>
<a href="#" class="dropdown-item">
Buy a sumsung headset
</a>
<a href="#" class="dropdown-item">
Listen music for one hour
</a>
<a href="#" class="dropdown-item">
Go for a morning walk
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const dropdown =
document.querySelector('.dropdown');
const active =
document.querySelector('.is-active')
document.body.addEventListener('click', function () {
if (active) {
dropdown.classList.remove('is-active')
}
})
dropdown.addEventListener('click', function (event) {
event.stopPropagation();
this.classList.toggle('is-active');
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra la creación de un menú desplegable que se puede desplazar usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Todos</span>
<span class="icon is-small">
<i class="fas fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Design a custom database to store
your daily activity
</a>
<a href="#" class="dropdown-item">
Take pictures of beautiful
flowers
</a>
<a href="#" class="dropdown-item">
Ride to a horse and write
your experience
</a>
<a href="#" class="dropdown-item">
Go for a trip with bike
</a>
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Buy a sumsung headset
</a>
<a href="#" class="dropdown-item">
Listen music for one hour
</a>
<a href="#" class="dropdown-item">
Go for a morning walk
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo muestra la creación de diferentes menús desplegables de alineación usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Left Aligned Todos</span>
<span class="icon is-small">
<i class="fas fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Take pictures of beautiful
flowers
</a>
<a href="#" class="dropdown-item">
Ride to a horse and write
your experience
</a>
<a href="#" class="dropdown-item">
Go for a trip with bike
</a>
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Buy a sumsung headset
</a>
<a href="#" class="dropdown-item">
Listen music for one hour
</a>
<a href="#" class="dropdown-item">
Go for a morning walk
</a>
</div>
</div>
</div>
</div>
<div class='column is-5'>
<div class="dropdown is-right is-hoverable">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Right Aligned Todos</span>
<span class="icon is-small">
<i class="fas fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Take pictures of beautiful
flowers
</a>
<a href="#" class="dropdown-item">
Ride to a horse and write
your experience
</a>
<a href="#" class="dropdown-item">
Go for a trip with bike
</a>
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Buy a sumsung headset
</a>
<a href="#" class="dropdown-item">
Listen music for one hour
</a>
<a href="#" class="dropdown-item">
Go for a morning walk
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo muestra la creación de un “dropup” usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 330px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="dropdown is-up is-hoverable">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Left Aligned Todos</span>
<span class="icon is-small">
<i class="fas fa-angle-up"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Take pictures of beautiful
flowers
</a>
<a href="#" class="dropdown-item">
Ride to a horse and write
your experience
</a>
<a href="#" class="dropdown-item">
Go for a trip with bike
</a>
<a href="#" class="dropdown-item">
Design a custom database
to store your daily activity
</a>
<a href="#" class="dropdown-item">
Buy a sumsung headset
</a>
<a href="#" class="dropdown-item">
Listen music for one hour
</a>
<a href="#" class="dropdown-item">
Go for a morning walk
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA