Panel

The b.Panel constructor creates a panel.

ModifierAction
b.PrimarySet color to primary
b.LinkSet color to link
b.InfoSet color to info
b.SuccessSet color to success
b.WarningSet color to warning
b.DangerSet color to danger

The b.PanelHeading constructor creates a panel heading.

The b.PanelBlock constructor creates a panel block.

The b.PanelLink and b.PanelAHref constructors create panel blocks which are <a> elements.

The b.PanelLabel constructor creates a panel block which is a <label> element.

The b.PanelTabs constructor creates a panel tabs section. Its children must be link elements (for instance e.AHref). Add the b.Activemodifier to a link to mark it as the active tab.

The b.PanelCheckbox constructor creates a panel block which is a <label> element, containing a checkbox.

ChildAction
b.OnLabel(...any)Apply children to the <label> element
b.OnInput(...any)Apply children to the <input> element
gomponents.Nodeof type gomponents.AttributeTypeApply attribute to the <input> element
gomponents.Nodeof type gomponents.ElementTypeAdd element to the <label> element
Anything elseAdd element to the <label> element

Bulma examples

Bulma documentation
Example
Code
b.Panel(
	b.PanelHeading("Repositories"),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "code-branch"),
		"daniellowtw/infboard",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "code-branch"),
		"mojs",
	),
	b.PanelCheckbox("remember me"),
	),
	b.PanelBlock(
		b.Button(
			b.Link,
			b.Outlined,
			b.FullWidth,
			"Reset all filters",
		),
	),
)
ResultHTML

Colors

Bulma documentation
Example
Code
b.Panel(
	b.Primary,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML
Example
Code
b.Panel(
	b.Link,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML
Example
Code
b.Panel(
	b.Info,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML
Example
Code
b.Panel(
	b.Success,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML
Example
Code
b.Panel(
	b.Warning,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML
Example
Code
b.Panel(
	b.Danger,
	b.PanelHeading("Repositories"),
	b.PanelTabs(
		e.A(b.Active, "All"),
		e.A("Public"),
		e.A("Private"),
		e.A("Sources"),
		e.A("Forks"),
	),
	b.PanelBlock(
		b.Control(
			html.P,
			b.IconsLeft,
			b.InputText(e.Placeholder("Search")),
			fa.Icon(fa.Solid, "search", b.Left),
		),
	),
	b.PanelLink(
		b.Active,
		fa.Icon(fa.Solid, "book"),
		"bulma",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"marksheet",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"minireset.css",
	),
	b.PanelLink(
		fa.Icon(fa.Solid, "book"),
		"jgthms.github.io",
	),
)
ResultHTML