Elements

Bulma-Gomponents relies on Gomplements to provide elements satisfying the e.Element interface, which is compatible with gomponents.Node, making them directly usable as children of other Gomponents nodes. This interface also provides the With(...any) e.Element function, which may be used to extend the element after its creation.

Document root

In order to generate a document root, use b.HTML(...any).

ModifierAction
b.CSSPath(string)Define the path to the CSS file (automatically applied in a <link rel="stylesheet">node) - if not defined, the default CDN is used
b.Language(string)Define the document language
b.HTitle(string)Define the document title
b.Description(string)Define the document description
b.Head(...gomponents.Node)Add one or multiple children to the <head>
Anything elseApply child to the <body>

Example 

b.HTML(
	b.Script("/htmx.min.js"),
	b.HTitle(p.Title+" | Bulma-Gomponents"),
	b.CSSPath("/bulma.css"),
	fa.CSSHead("/fa"),
	b.Language("en"),
	b.Head(e.Meta(e.Charset("utf-8"))),
	b.Content(
		e.H1("Hello"),
		e.P("Hello world"),
	),
)

Creating elements

Most functions in Bulma-Gomponents return objects which satisfy the e.Element interface. These objects may be used as children of each other, or children of the result of b.HTML, or even children of gomponents.Node elements.

Example
Code
import (
	"github.com/maragudk/gomponents"
	"github.com/maragudk/gomponents/html"
	b "github.com/willoma/bulma-gomponents"
	"github.com/willoma/bulma-gomponents/fa"
)
[...]
html.Div(
	html.Class("someClass otherClass"),
	b.Box(
		b.Title(3, "Here it is"),
		b.IconText(
			fa.Icon(fa.Solid, "lightbulb"),
			"The library",
		),
		" that makes it easier to create web GUIs, based on ",
		e.A(e.Href("https://www.gomponents.com/"), "Gomponents"),
		" and ",
		html.A(html.Href("https://bulma.io/"), gomponents.Text("Bulma")),
		"!",
	),
)
ResultHTML

Here it is

The library that makes it easier to create web GUIs, based on Gomponents and Bulma!

See the Gomplements documentation to learn more about the e.Element interface.

Providing children to elements

In order to provide children to a Bulma-Gomponents element, the following methods can be used:

  • pass the children as direct arguments to the element constructor function
  • pass a slice of children (as a []any) as an argument to the constructor function (this method works recursively)
  • pass the children as arguments of the With function of the element
  • pass a slice of children (as a []any) as an argument to the With function of the element

The following examples are all equivalent:

Example
Code
e.Div(
	e.Strong("Hello"), " ",
	b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe")),
	"...",
),
e.Div(
	[]any{
		e.Strong("Hello"), " ",
		b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe")),
	},
	"...",
),
e.Div(e.Strong("Hello"), " ").With(
	b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe")),
	"...",
),
e.Div(e.Strong("Hello"), " ").
	With(b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe"))).
	With("..."),
e.Div(
	[]any{e.Strong("Hello"), " "},
	b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe")),
).With("..."),
e.Div().
	With(e.Strong("Hello"), " ").
	With(b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe"))).
	With("..."),
e.Div().
	With(
		[]any{e.Strong("Hello"), " "},
		b.IconText(e.Em("world"), fa.Icon(fa.Solid, "globe")),
	).
	With("...")
ResultHTML
Hello world...
Hello world...
Hello world...
Hello world...
Hello world...
Hello world...
Hello world...

Cloning and preparing elements

If you need to clone an element generated by Bulma-Gomponents, you can call the Clone() method on that element. It ensures any modification made to the clone is independent from the original element. It may be useful to generate multiple components that look the same and have only a few different parameters. Moreover, some elements have attributes that are generated on render-time, depending on the children you have already provided. Therefore, if you need to render an element and modify it later in order to re-render it with more content, simply clone it before rendering and modify its clone.

On the other hand, if you have a component that will never be cloned and that will be re-used multiple times, you can prepare its rendering with the e.Prepare(e.Element) function, which returns an object which implements gomponents.Node with the element's full content already pre-rendered in memory: further calls to Render(io.Writer) on the prepared element will simply copy the pre-rendered content to the provided writer. It may be useful for content you reuse often, like icons or static menus.

Adding elements conditionally

Sometimes you may want to render an element only if some condition is true. You can use the e.If(bool, e.ElementBuilder, ...any) function to add an element only if the condition is true and avoid any calculation if the condition is false:

Example
Code
e.If(true, b.Checkbox, "Checkbox"),
e.If(false, b.Radio, "Radio"),
ResultHTML