Level | Bulma-Gomponents

Level

The b.Level constructor creates a level.

Child	Action
`b.LevelLeft(...any)`	Apply children to the `<div class="level-left">` element
`b.LevelRight(...any)`	Apply children to the `<div class="level-right">` element
`e.Element`	Add the `level-item` class to the element and apply the element to the `<nav class="level">` element
`string`	Wrap text into an `<p>` element with class `level-item` and apply it to the `<nav class="level">` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply attribute to the `<nav class="level">` element
`gomponents.Node`of type `gomponents.ElementType`	Wrap element into a `<div>` element with class `level-item` and apply it to the `<nav class="level">` element
Anything else	Apply child to the `<nav class="level">` element

The b.LevelLeft and b.LevelRight functions create content for the level left or right sections.

Child	Action
`e.Element`	Add the `level-item` class to the element
`string`	Wrap text into an `<p>` element with class `level-item`
`gomponents.Node`of type `gomponents.AttributeType`	Apply attribute to the level section
`gomponents.Node`of type `gomponents.ElementType`	Wrap element into a `<div>` element with class `level-item`

Bulma examples

Bulma documentation

Example

ResultHTML

<nav class="level"><div class="level-left"><div class="level-item"><h5 class="subtitle is-5"><strong>123</strong> posts</h5></div><div class="level-item"><div class="field has-addons"><div class="control"><input class="input" type="text" placeholder="Find a post"></div><div class="control"><button class="button">Search</button></div></div></div></div><div class="level-right"><p class="level-item"><strong>All</strong></p><p class="level-item"><a>Published</a></p><p class="level-item"><a>Drafts</a></p><p class="level-item"><a>Deleted</a></p><p class="level-item"><a class="button is-success">New</a></p></div></nav>

Code

b.Level(
	b.LevelLeft(
		e.Div(
			b.Subtitle(5, e.Strong("123"), " posts"),
		),
		e.Div(
			b.Field(
				b.Addons,
				b.Control(b.InputText(e.Placeholder("Find a post"))),
				b.Control(b.Button("Search")),
			),
		),
	),
	b.LevelRight(
		e.P(e.Strong("All")),
		e.P(e.A("Published")),
		e.P(e.A("Drafts")),
		e.P(e.A("Deleted")),
		e.P(b.ButtonA(b.Success, "New")),
	),
)

Centered level

Bulma documentation

Example

ResultHTML

<nav class="level"><div class="level-item has-text-centered"><div><p>Tweets</p><p class="title">3,456</p></div></div><div class="level-item has-text-centered"><div><p>Following</p><p class="title">123</p></div></div><div class="has-text-centered level-item"><div><p>Followers</p><p class="title">456K</p></div></div><div class="has-text-centered level-item"><div><p>Likes</p><p class="title">789</p></div></div></nav>

Code

b.Level(
	e.Div(
		b.TextCentered,
		e.Div(e.P("Tweets"), b.Title(html.P, "3,456")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Following"), b.Title(html.P, "123")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Followers"), b.Title(html.P, "456K")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Likes"), b.Title(html.P, "789")),
	),
)

Example

ResultHTML

<nav class="level"><p class="has-text-centered level-item"><a>Home</a></p><p class="has-text-centered level-item"><a>Menu</a></p><p class="level-item"><img style="height:30px;" src="https://bulma.io/assets/images/bulma-type.png" alt=""></p><p class="level-item has-text-centered"><a>Reservations</a></p><p class="has-text-centered level-item"><a>Contact</a></p></nav>

Code

b.Level(
	e.P(b.TextCentered, e.A("Home")),
	e.P(b.TextCentered, e.A("Menu")),
	e.P(e.ImgSrc("https://bulma.io/assets/images/bulma-type.png", e.Alt(""), e.Styles{"height": "30px"})),
	e.P(b.TextCentered, e.A("Reservations")),
	e.P(b.TextCentered, e.A("Contact")),
)

Mobile level

Bulma documentation

Example

ResultHTML

<nav class="level is-mobile"><div class="level-item has-text-centered"><div><p>Tweets</p><p class="title">3,456</p></div></div><div class="has-text-centered level-item"><div><p>Following</p><p class="title">123</p></div></div><div class="level-item has-text-centered"><div><p>Followers</p><p class="title">456K</p></div></div><div class="has-text-centered level-item"><div><p>Likes</p><p class="title">789</p></div></div></nav>

Code

b.Level(
	b.Mobile,
	e.Div(
		b.TextCentered,
		e.Div(e.P("Tweets"), b.Title(html.P, "3,456")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Following"), b.Title(html.P, "123")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Followers"), b.Title(html.P, "456K")),
	),
	e.Div(
		b.TextCentered,
		e.Div(e.P("Likes"), b.Title(html.P, "789")),
	),
)