Bulma es un framework CSS basado en flexbox. Viene con componentes prediseñados que facilitan la creación de sitios web y aplicaciones web hermosos y receptivos. En este artículo, veremos cómo combinar diferentes modificadores de pestañas.
Clases de estilo de pestañas de Bulma:
- is-boxed: esta clase se usa para establecer el estilo de las pestañas en boxed.
- is-toggle: esta clase se usa para configurar el estilo de las pestañas para alternar.
- is-toggle-rounded with is-toggle: estas clases se utilizan para configurar el estilo de las pestañas para alternar con el primer y último elemento redondeado.
- is-fullwidth: esta clase se usa para establecer el estilo de las pestañas en ancho completo. Las pestañas tomarán todo el ancho disponible cuando se aplique esta clase.
Modificadores de tamaño de pestañas de Bulma:
- is-small: esta clase se usa para establecer el tamaño de la pestaña en pequeño.
- is-medium: esta clase se utiliza para establecer el tamaño de la pestaña en medio.
- is-large: esta clase se usa para establecer el tamaño de la pestaña en grande.
Modificadores de alineación de pestañas de Bulma:
- is-centered: esta clase se utiliza para establecer la alineación de las pestañas al centro.
- is-right: esta clase se usa para establecer la alineación de las pestañas a la derecha.
Los modificadores anteriores se pueden combinar para obtener el estilo que desea. Por ejemplo, puede combinar is-toggle con el modificador is-fullwidth para tener las pestañas de alternancia que ocupan todo el ancho disponible.
Sintaxis:
<div class="tabs is-toggle is-fullwidth"> .... </div>
Ejemplo: El siguiente ejemplo muestra cómo combinar los modificadores de pestañas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tabs Combining</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>p {
margin-top: 30px;
}
.container>.tabs {
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 Tabs Combining</b>
<div class="container is-fluid">
<p><b>
Boxed tabs which takes up fullwidth
and align to center:
</b></p>
<div class="tabs is-boxed is-fullwidth is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>
Rounded Toggle Tabs which are
aligned to the right:
</b></p>
<div class="tabs is-toggle is-toggle-rounded is-right">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Toggle Tabs which takes up
fullwidth and are large in size:</b>
</p>
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">a
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Combinación de pestañas de Bulma
Referencia: https://bulma.io/documentation/components/tabs/#combining