Tags

The b.Tag constructor creates a tag. The b.DeleteTag constructor creates a delete button-looking tag.

ModifierAction
b.WhiteSet color to white
b.BlackSet color to black
b.LightSet color to light
b.DarkSet color to dark
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
b.PrimaryLightSet color to primary light
b.LinkLightSet color to link light
b.InfoLightSet color to info light
b.SuccessLightSet color to success light
b.WarningLightSet color to warning light
b.DangerLightSet color to danger light
b.SmallSet size to small
b.NormalSet size to normal
b.MediumSet size to medium
b.LargeSet size to large
b.RoundedMake a rounded tag

The b.Tags constructor creates a list of tags.

ModifierAction
b.AddonsAttach the contained tags together

Bulma examples

Bulma documentation
Example
Code
b.Tag("Tag label")
ResultHTML
Tag label

Colors

Bulma documentation
Example
Code
e.Div(b.MarginBottom(1), b.Tag(b.Black, "Black")),
e.Div(b.MarginBottom(1), b.Tag(b.Dark, "Dark")),
e.Div(b.MarginBottom(1), b.Tag(b.Light, "Light")),
e.Div(b.MarginBottom(1), b.Tag(b.White, "White")),
e.Div(b.MarginBottom(1), b.Tag(b.Primary, "Primary")),
e.Div(b.MarginBottom(1), b.Tag(b.Link, "Link")),
e.Div(b.MarginBottom(1), b.Tag(b.Info, "Info")),
e.Div(b.MarginBottom(1), b.Tag(b.Success, "Success")),
e.Div(b.MarginBottom(1), b.Tag(b.Warning, "Warning")),
e.Div(b.MarginBottom(1), b.Tag(b.Danger, "Danger")),
ResultHTML
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
Example
Code
e.Div(b.MarginBottom(1), b.Tag(b.PrimaryLight, "Primary")),
e.Div(b.MarginBottom(1), b.Tag(b.LinkLight, "Link")),
e.Div(b.MarginBottom(1), b.Tag(b.InfoLight, "Info")),
e.Div(b.MarginBottom(1), b.Tag(b.SuccessLight, "Success")),
e.Div(b.MarginBottom(1), b.Tag(b.WarningLight, "Warning")),
e.Div(b.MarginBottom(1), b.Tag(b.DangerLight, "Danger"))
ResultHTML
Primary
Link
Info
Success
Warning
Danger

Sizes

Bulma documentation
Example
Code
e.Div(b.MarginBottom(1), b.Tag(b.Link, b.Normal, "Normal")),
e.Div(b.MarginBottom(1), b.Tag(b.Primary, b.Medium, "Medium")),
e.Div(b.MarginBottom(1), b.Tag(b.Info, b.Large, "Large"))
ResultHTML
Normal
Medium
Large
Example
Code
b.Tags(
	b.Medium,
	b.Tag("All"),
	b.Tag("Medium"),
	b.Tag("Size"),
)
ResultHTML
AllMediumSize
Example
Code
b.Tags(
	b.Large,
	b.Tag("All"),
	b.Tag("Large"),
	b.Tag("Size"),
)
ResultHTML
AllLargeSize
Example
Code
b.Tags(
	b.Medium,
	b.Tag("Medium"),
	b.Tag(b.Normal, "Normal"),
	b.Tag("Medium"),
	b.Tag(b.Large, "Large"),
	b.Tag("Medium"),
)
ResultHTML
MediumNormalMediumLargeMedium

Modifiers

Bulma documentation
Example
Code
b.Tag(b.Rounded, "Rounded")
ResultHTML
Rounded
Example
Code
b.DeleteTag()
ResultHTML

Combinations

Bulma documentation
Example
Code
e.Div(b.MarginBottom(1), b.Tag(
	b.Success,
	"Bar",
	b.Delete(b.Small),
)),
e.Div(b.MarginBottom(1), b.Tag(
	b.Warning, b.Medium,
	"Hello",
	b.Delete(b.Small),
)),
e.Div(b.MarginBottom(1), b.Tag(
	b.Danger, b.Large,
	"World",
	b.Delete(),
))
ResultHTML
Bar
Hello
World

List of tags

Bulma documentation
Example
Code
b.Tags(
	b.Tag("One"),
	b.Tag("Two"),
	b.Tag("Three"),
)
ResultHTML
OneTwoThree
Example
Code
b.Tags(
	b.Tag("One"),
	b.Tag("Two"),
	b.Tag("Three"),
	b.Tag("Four"),
	b.Tag("Five"),
	b.Tag("Six"),
	b.Tag("Seven"),
	b.Tag("Eight"),
	b.Tag("Nine"),
	b.Tag("Ten"),
	b.Tag("Eleven"),
	b.Tag("Twelve"),
	b.Tag("Thirteen"),
	b.Tag("Fourteen"),
	b.Tag("Fifteen"),
	b.Tag("Sixteen"),
	b.Tag("Seventeen"),
	b.Tag("Eighteen"),
	b.Tag("Nineteen"),
	b.Tag("Twenty"),
)
ResultHTML
OneTwoThreeFourFiveSixSevenEightNineTenElevenTwelveThirteenFourteenFifteenSixteenSeventeenEighteenNineteenTwenty

Tag addons

Bulma documentation
Example
Code
b.Tags(
	b.Addons,
	b.Tag("Package"),
	b.Tag(b.Primary, "Bulma"),
)
ResultHTML
PackageBulma
Example
Code
b.Tags(
	b.Addons,
	b.Tag(b.Danger, "Alex Smith"),
	b.DeleteTag(),
)
ResultHTML
Alex Smith
Example
Code
b.Field(
	b.GroupedMultiline,
	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Dark, "npm"),
			b.Tag(b.Info, "0.9.4"),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Dark, "build"),
			b.Tag(b.Success, "passing"),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Dark, "chat"),
			b.Tag(b.Primary, "on gitter"),
		),
	),
)
ResultHTML
npm0.9.4
buildpassing
chaton gitter
Example
Code
b.Field(
	b.GroupedMultiline,
	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Technology"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "CSS"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Flexbox"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Web Design"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Open Source"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Community"),
			b.DeleteTag(),
		),
	),

	b.Control(
		b.Tags(
			b.Addons,
			b.Tag(b.Link, "Documentation"),
			b.DeleteTag(),
		),
	),
)
ResultHTML
Technology
CSS
Flexbox
Web Design
Open Source
Community
Documentation