Tabs

The b.Tabs constructor creates a tabs container. Its link children must be created with the b.TabLink constructor.

Modifier	Action
`b.Centered`	Center the tabs
`b.Right`	Align the tabs to the right
`b.Boxed`	Draw boxed tabs
`b.Toggle`	Button-looking tabs
`b.ToggleRounded`	Rounded button-looking tabs
`b.FullWidth`	Take the whole width
`b.Small`	Set size to small
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnTabs(...any)`	Apply children to the `<div class="tabs">` element
`b.OnUl(...any)`	Apply children to the `<ul>` element
`e.Class`, `e.Classer`, `e.Classeser` or `e.Styles`	Apply child to the `<div class="tabs">` element
`b.Container(...any)`	Use element as an intermediate container
Anything else	Apply children to the `<ul>` element

The b.TabLink and b.TabAHref constructors create tab entries which are links.

Modifier	Action
`b.Active`	Apply the `is-active` class to the `<li>` element

Bulma examples

Bulma documentation

Example

Code

b.Tabs(
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Alignment

Bulma documentation

Example

Code

b.Tabs(
	b.Centered,
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-centered"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Example

Code

b.Tabs(
	b.Right,
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-right"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Icons

Bulma documentation

Example

Code

b.Tabs(
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs"><ul><li class="is-active"><a><span class="icon"><i class="fa-image fa-solid"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-music fa-solid"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-film fa-solid"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-solid fa-file-alt"></i></span><span>Documents</span></a></li></ul></div>

Sizes

Bulma documentation

Example

Code

b.Tabs(
	b.Small,
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-small"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Example

Code

b.Tabs(
	b.Medium,
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-medium"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Example

Code

b.Tabs(
	b.Large,
	b.TabLink(b.Active, "Pictures"),
	b.TabLink("Music"),
	b.TabLink("Videos"),
	b.TabLink("Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-large"><ul><li class="is-active"><a>Pictures</a></li><li><a>Music</a></li><li><a>Videos</a></li><li><a>Documents</a></li></ul></div>

Styles

Bulma documentation

Example

Code

b.Tabs(
	b.Boxed,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-boxed"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-music fa-solid"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-film fa-solid"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-solid fa-file-alt"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.Toggle,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="is-toggle tabs"><ul><li class="is-active"><a><span class="icon"><i class="fa-image fa-solid"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-solid fa-music"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-solid fa-film"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-file-alt fa-solid"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.ToggleRounded,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-toggle is-toggle-rounded"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-solid fa-music"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-solid fa-film"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-file-alt fa-solid"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.FullWidth,
	b.TabLink(fa.Icon(fa.Solid, "angle-left"), "Left"),
	b.TabLink(fa.Icon(fa.Solid, "angle-up"), "Up"),
	b.TabLink(fa.Icon(fa.Solid, "angle-right"), "Right"),
)

ResultHTML

Left
Up
Right

<div class="tabs is-fullwidth"><ul><li><a><span class="icon"><i class="fa-solid fa-angle-left"></i></span><span>Left</span></a></li><li><a><span class="icon"><i class="fa-angle-up fa-solid"></i></span><span>Up</span></a></li><li><a><span class="icon"><i class="fa-solid fa-angle-right"></i></span><span>Right</span></a></li></ul></div>

Combining

Bulma documentation

Example

Code

b.Tabs(
	b.Centered,
	b.Boxed,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="is-boxed tabs is-centered"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-music fa-solid"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-film fa-solid"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-file-alt fa-solid"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.Toggle,
	b.FullWidth,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="is-fullwidth tabs is-toggle"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-music fa-solid"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-film fa-solid"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-solid fa-file-alt"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.Centered,
	b.Boxed,
	b.Medium,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="is-boxed is-medium tabs is-centered"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-music fa-solid"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-solid fa-film"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-file-alt fa-solid"></i></span><span>Documents</span></a></li></ul></div>

Example

Code

b.Tabs(
	b.Toggle,
	b.FullWidth,
	b.Large,
	b.TabLink(b.Active, fa.Icon(fa.Solid, "image"), "Pictures"),
	b.TabLink(fa.Icon(fa.Solid, "music"), "Music"),
	b.TabLink(fa.Icon(fa.Solid, "film"), "Videos"),
	b.TabLink(fa.Icon(fa.Solid, "file-alt"), "Documents"),
)

ResultHTML

Pictures
Music
Videos
Documents

<div class="tabs is-toggle is-fullwidth is-large"><ul><li class="is-active"><a><span class="icon"><i class="fa-solid fa-image"></i></span><span>Pictures</span></a></li><li><a><span class="icon"><i class="fa-solid fa-music"></i></span><span>Music</span></a></li><li><a><span class="icon"><i class="fa-solid fa-film"></i></span><span>Videos</span></a></li><li><a><span class="icon"><i class="fa-solid fa-file-alt"></i></span><span>Documents</span></a></li></ul></div>