bulma

package module
v0.1.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Feb 28, 2024 License: MIT Imports: 7 Imported by: 6

README

Bulma-Gomponents

GoDoc

This Go library makes it easier to use the Bulma CSS framework with the Gomponents library.

https://www.gomponents.com/ is a collection of HTML 5 components in pure Go.

https://bulma.io/ is a CSS framework "that just works".

Bulma-Gomponents provides numerous helpers that allow easily creating web interfaces, without the need to write HTML, CSS or JS code. It fits well with https://htmx.org/ thanks to https://github.com/maragudk/gomponents-htmx.

Documentation

To run the documentation server locally, execute:

go run docs/cmd/*.go

Documentation

Index

Constants

View Source 
const (
	Active                     = Class("is-active")                        // Button*, Dropdown, Dropup, NavbarItem, PanelTabs/a
	AlignContentBaseline       = Class("is-align-content-baseline")        // any child of an element with Flex
	AlignContentCenter         = Class("is-align-content-center")          // any child of an element with Flex
	AlignContentEnd            = Class("is-align-content-end")             // any child of an element with Flex
	AlignContentFlexEnd        = Class("is-align-content-flex-end")        // any child of an element with Flex
	AlignContentFlexStart      = Class("is-align-content-flex-start")      // any child of an element with Flex
	AlignContentSpaceAround    = Class("is-align-content-space-around")    // any child of an element with Flex
	AlignContentSpaceBetween   = Class("is-align-content-space-between")   // any child of an element with Flex
	AlignContentSpaceEvenly    = Class("is-align-content-space-evenly")    // any child of an element with Flex
	AlignContentStart          = Class("is-align-content-start")           // any child of an element with Flex
	AlignContentStretch        = Class("is-align-content-stretch")         // any child of an element with Flex
	AlignItemsBaseline         = Class("is-align-items-baseline")          // any child of an element with Flex
	AlignItemsCenter           = Class("is-align-items-center")            // any child of an element with Flex
	AlignItemsEnd              = Class("is-align-items-end")               // any child of an element with Flex
	AlignItemsFlexEnd          = Class("is-align-items-flex-end")          // any child of an element with Flex
	AlignItemsFlexStart        = Class("is-align-items-flex-start")        // any child of an element with Flex
	AlignItemsSelfEnd          = Class("is-align-items-self-end")          // any child of an element with Flex
	AlignItemsSelfStart        = Class("is-align-items-self-start")        // any child of an element with Flex
	AlignItemsStart            = Class("is-align-items-start")             // any child of an element with Flex
	AlignItemsStretch          = Class("is-align-items-stretch")           // any child of an element with Flex
	AlignSelfAuto              = Class("is-align-self-auto")               // any child of an element with Flex
	AlignSelfBaseline          = Class("is-align-self-baseline")           // any child of an element with Flex
	AlignSelfCenter            = Class("is-align-self-center")             // any child of an element with Flex
	AlignSelfFlexEnd           = Class("is-align-self-flex-end")           // any child of an element with Flex
	AlignSelfFlexStart         = Class("is-align-self-flex-start")         // any child of an element with Flex
	AlignSelfStretch           = Class("is-align-self-stretch")            // any child of an element with Flex
	Arrowless                  = Class("is-arrowless")                     // NavbarLink
	Bordered                   = Class("is-bordered")                      // Table
	Boxed                      = Class("is-boxed")                         // NavbarDropdown, Tabs, File
	Capitalized                = Class("is-capitalized")                   // any text element
	Centered                   = Class("is-centered")                      // Columns, Buttons, Breadcrumb, Pagination, Tabs, File
	Clearfix                   = Class("is-clearfix")                      // any element
	Clickable                  = Class("is-clickable")                     // any element
	Clipped                    = Class("is-clipped")                       // any element
	Code                       = Class("is-family-code")                   // any text element
	Current                    = Class("is-current")                       // PaginationLink
	Desktop                    = Class("is-desktop")                       // Columns
	Disabled                   = Class("is-disabled")                      // PaginationLink, PaginationNext, PaginationPrevious
	Expanded                   = Class("is-expanded")                      // NavbarItem, NavbarAHref, Control
	FixedBottom                = Class("is-fixed-bottom")                  // Navbar
	FixedTop                   = Class("is-fixed-top")                     // Navbar
	Flex                       = Class("is-flex")                          // any element (responsive variants are supported)
	FlexColumn                 = Class("is-flex-direction-column")         // any child of an element with Flex
	FlexColumnReverse          = Class("is-flex-direction-column-reverse") // any child of an element with Flex
	FlexGrow0                  = Class("is-flex-grow-0")                   // any child of an element with Flex
	FlexGrow1                  = Class("is-flex-grow-1")                   // any child of an element with Flex
	FlexGrow2                  = Class("is-flex-grow-2")                   // any child of an element with Flex
	FlexGrow3                  = Class("is-flex-grow-3")                   // any child of an element with Flex
	FlexGrow4                  = Class("is-flex-grow-4")                   // any child of an element with Flex
	FlexGrow5                  = Class("is-flex-grow-5")                   // any child of an element with Flex
	FlexNowrap                 = Class("is-flex-wrap-nowrap")              // any child of an element with Flex
	FlexRow                    = Class("is-flex-direction-row")            // any child of an element with Flex
	FlexRowReverse             = Class("is-flex-direction-row-reverse")    // any child of an element with Flex
	FlexShrink0                = Class("is-flex-shrink-0")                 // any child of an element with Flex
	FlexShrink1                = Class("is-flex-shrink-1")                 // any child of an element with Flex
	FlexShrink2                = Class("is-flex-shrink-2")                 // any child of an element with Flex
	FlexShrink3                = Class("is-flex-shrink-3")                 // any child of an element with Flex
	FlexShrink4                = Class("is-flex-shrink-4")                 // any child of an element with Flex
	FlexShrink5                = Class("is-flex-shrink-5")                 // any child of an element with Flex
	FlexWrap                   = Class("is-flex-wrap-wrap")                // any child of an element with Flex
	FlexWrapReverse            = Class("is-flex-wrap-wrap-reverse")        // any child of an element with Flex
	Focused                    = Class("is-focused")                       // Button*, Input*, Select, SelectMultiple
	FontSize1                  = Class("is-size-1")                        // any text element (responsive variants are supported)
	FontSize2                  = Class("is-size-2")                        // any text element (responsive variants are supported)
	FontSize3                  = Class("is-size-3")                        // any text element (responsive variants are supported)
	FontSize4                  = Class("is-size-4")                        // any text element (responsive variants are supported)
	FontSize5                  = Class("is-size-5")                        // any text element (responsive variants are supported)
	FontSize6                  = Class("is-size-6")                        // any text element (responsive variants are supported)
	FontSize7                  = Class("is-size-7")                        // any text element (responsive variants are supported)
	FourFifths                 = Class("is-four-fifths")                   // Column
	Full                       = Class("is-full")                          // Column
	FullHeight                 = Class("fullheight")                       // Hero
	FullHeightWithNavbar       = Class("fullheight-with-navbar")           // Hero
	FullWidth                  = Class("is-fullwidth")                     // Button*, Image, ImageImg, Table, Tabs, File, Select
	Gapless                    = Class("is-gapless")                       // Columns
	Ghost                      = Class("is-ghost")                         // Button*
	Grouped                    = Class("is-grouped")                       // Field
	Half                       = Class("is-half")                          // Column
	HalfHeight                 = Class("halfheight")                       // Hero
	Hidden                     = Class("is-hidden")                        // any element (responsive variants are supported)
	Horizontal                 = Class("is-horizontal")                    // Field
	Hoverable                  = Class("is-hoverable")                     // Table, Dropdown, Dropup, NavbarItem
	Hovered                    = Class("is-hovered")                       // Button*, Input*, Select, SelectMultiple
	Img1By1                    = Class("is-1by1")                          // Image, ImageImg
	Img5By4                    = Class("is-5by4")                          // Image, ImageImg
	Img4By3                    = Class("is-4by3")                          // Image, ImageImg
	Img3By2                    = Class("is-3by2")                          // Image, ImageImg
	Img5By3                    = Class("is-5by3")                          // Image, ImageImg
	Img16By9                   = Class("is-16by9")                         // Image, ImageImg
	Img2By1                    = Class("is-2by1")                          // Image, ImageImg
	Img3By1                    = Class("is-3by1")                          // Image, ImageImg
	Img4By5                    = Class("is-4by5")                          // Image, ImageImg
	Img3By4                    = Class("is-3by4")                          // Image, ImageImg
	Img2By3                    = Class("is-2by3")                          // Image, ImageImg
	Img3By5                    = Class("is-3by5")                          // Image, ImageImg
	Img9By16                   = Class("is-9by16")                         // Image, ImageImg
	Img1By2                    = Class("is-1by2")                          // Image, ImageImg
	Img1By3                    = Class("is-1by3")                          // Image, ImageImg
	ImgSq16                    = Class("is-16x16")                         // Image, ImageImg
	ImgSq24                    = Class("is-24x24")                         // Image, ImageImg
	ImgSq32                    = Class("is-24x24")                         // Image, ImageImg
	ImgSq48                    = Class("is-48x48")                         // Image, ImageImg
	ImgSq64                    = Class("is-64x64")                         // Image, ImageImg
	ImgSq96                    = Class("is-96x96")                         // Image, ImageImg
	ImgSq128                   = Class("is-128x128")                       // Image, ImageImg
	ImgSquare                  = Class("is-square")                        // Image, ImageImg
	Inline                     = Class("is-inline")                        // any element (responsive variants are supported)
	InlineBlock                = Class("is-inline-block")                  // any element (responsive variants are supported)
	InlineFlex                 = Class("is-inline-flex")                   // any element (responsive variants are supported)
	Inverted                   = Class("is-inverted")                      // Button*
	Invisible                  = Class("is-invisible")                     // any element
	Italic                     = Class("is-italic")                        // any text element
	JustifyContentCenter       = Class("is-justify-content-center")        // any child of an element with Flex
	JustifyContentEnd          = Class("is-justify-content-end")           // any child of an element with Flex
	JustifyContentFlexEnd      = Class("is-justify-content-flex-end")      // any child of an element with Flex
	JustifyContentFlexStart    = Class("is-justify-content-flex-start")    // any child of an element with Flex
	JustifyContentLeft         = Class("is-justify-content-left")          // any child of an element with Flex
	JustifyContentRight        = Class("is-justify-content-right")         // any child of an element with Flex
	JustifyContentSpaceAround  = Class("is-justify-content-space-around")  // any child of an element with Flex
	JustifyContentSpaceBetween = Class("is-justify-content-space-between") // any child of an element with Flex
	JustifyContentSpaceEvenly  = Class("is-justify-content-space-evenly")  // any child of an element with Flex
	JustifyContentStart        = Class("is-justify-content-start")         // any child of an element with Flex
	Large                      = Class("is-large")                         // Button*, Buttons, Content, Delete, Icon, Tag, Breadcrumb, Pagination, File, Hero, Section
	Left                       = Class("is-left")                          // Label/input, Label/select
	Loading                    = Class("is-loading")                       // Button*, Input*, Select, SelectMultiple
	Lowercase                  = Class("is-lowercase")                     // any text element
	Medium                     = Class("is-medium")                        // Button*, Buttons, Content, Delete, Icon, Tag, Breadcrumb, Pagination, File, Hero, Section
	Mobile                     = Class("is-mobile")                        // Columns, Level
	Monospace                  = Class("is-family-monospace")              // any text element
	Multiline                  = Class("is-multiline")                     // Columns
	Narrow                     = Class("is-narrow")                        // Column, Table
	NavbarFixedBottom          = Class("has-navbar-fixed-bottom")          // HTML/body
	NavbarFixedTop             = Class("has-navbar-fixed-top")             // HTML/body
	Normal                     = Class("is-normal")                        // Button*, Content, Tag, File
	Offset1                    = Class("is-offset-1")                      // Column
	Offset2                    = Class("is-offset-2")                      // Column
	Offset3                    = Class("is-offset-3")                      // Column
	Offset4                    = Class("is-offset-4")                      // Column
	Offset5                    = Class("is-offset-5")                      // Column
	Offset6                    = Class("is-offset-6")                      // Column
	Offset7                    = Class("is-offset-7")                      // Column
	Offset8                    = Class("is-offset-8")                      // Column
	Offset9                    = Class("is-offset-9")                      // Column
	Offset10                   = Class("is-offset-10")                     // Column
	Offset11                   = Class("is-offset-11")                     // Column
	OffsetFourFifths           = Class("is-offset-four-fifths")            // Column
	OffsetHalf                 = Class("is-offset-half")                   // Column
	OffsetOneFifth             = Class("is-offset-one-fifth")              // Column
	OffsetOneQuarter           = Class("is-offset-one-quarter")            // Column
	OffsetOneThird             = Class("is-offset-one-third")              // Column
	OffsetThreeFifths          = Class("is-offset-three-fifths")           // Column
	OffsetThreeQuarters        = Class("is-offset-three-quarters")         // Column
	OffsetTwoFifths            = Class("is-offset-two-fifths")             // Column
	OffsetTwoThirds            = Class("is-offset-two-thirds")             // Column
	OlLowerAlpha               = Class("is-lower-alpha")                   // Content/ol
	OlLowerRoman               = Class("is-lower-roman")                   // Content/ol
	OlUpperAlpha               = Class("is-upper-alpha")                   // Content/ol
	OlUpperRoman               = Class("is-upper-roman")                   // Content/ol
	OneFifth                   = Class("is-one-fifth")                     // Column
	OneQuarter                 = Class("is-one-quarter")                   // Column
	OneThird                   = Class("is-one-third")                     // Column
	Outlined                   = Class("is-outlined")                      // Button*
	Overlay                    = Class("is-overlay")                       // any element
	PulledLeft                 = Class("is-pulled-left")                   // any element
	PulledRight                = Class("is-pulled-right")                  // any element
	Radiusless                 = Class("is-radiusless")                    // any element
	Relative                   = Class("is-relative")                      // any element
	Responsive                 = Class("is-responsive")                    // Button
	Right                      = Class("is-right")                         // Buttons, Breadcrumb, NavbarDropdown, Tabs, File, Label/input, Label/select
	Rounded                    = Class("is-rounded")                       // Button*, Image/img, ImageImg, Rounded, Pagination, Input*, Select, SelectMultiple
	SansSerif                  = Class("is-family-sans-serif")             // any text element
	Selected                   = Class("is-selected")                      // Button*, Table
	Shadowless                 = Class("is-shadowless")                    // any element
	Size1                      = Class("is-1")                             // Column, Tile
	Size2                      = Class("is-2")                             // Column, Tile
	Size3                      = Class("is-3")                             // Column, Tile
	Size4                      = Class("is-4")                             // Column, Tile
	Size5                      = Class("is-5")                             // Column, Tile
	Size6                      = Class("is-6")                             // Column, Tile
	Size7                      = Class("is-7")                             // Column, Tile
	Size8                      = Class("is-8")                             // Column, Tile
	Size9                      = Class("is-9")                             // Column, Tile
	Size10                     = Class("is-10")                            // Column, Tile
	Size11                     = Class("is-11")                            // Column, Tile
	Size12                     = Class("is-12")                            // Column, Tile
	Small                      = Class("is-small")                         // Button*, Buttons, Content, Delete, Icon, Breadcrumb, Pagination, File, Hero
	Spaced                     = Class("is-spaced")                        // Title*, Subtitle*, Navbar
	SrOnly                     = Class("is-sr-only")                       // any element
	Static                     = Class("is-static")                        // Button*, Input*
	Striped                    = Class("is-striped")                       // Table
	Tab                        = Class("is-tab")                           // NavbarItem, NavbarAHref
	Text                       = Class("is-text")                          // Button*
	TextPrimary                = Class("is-family-primary")                // any text element
	TextSecondary              = Class("is-family-secondary")              // any text element
	ThreeFifths                = Class("is-three-fifths")                  // Column
	ThreeQuarters              = Class("is-three-quarters")                // Column
	Toggle                     = Class("is-toggle")                        // Tabs
	Transparent                = Class("is-transparent")                   // Navbar
	TwoFifths                  = Class("is-two-fifths")                    // Column
	TwoThirds                  = Class("is-two-thirds")                    // Column
	Underlined                 = Class("is-underlined")                    // any text element
	Unselectable               = Class("is-unselectable")                  // any element
	Uppercase                  = Class("is-uppercase")                     // any text element
	VCentered                  = Class("is-vcentered")                     // Columns
	VisibilityBlock            = Class("is-block")                         // any element (responsive variants are supported)
)

"is-" classes

View Source 
const (
	Addons            = Class("has-addons")           // Buttons, Tags, Field
	ArrowSeparator    = Class("has-arrow-separator")  // Breadcrumb
	Bold              = Class("has-text-weight-bold") // any text element
	BulletSeparator   = Class("has-bullet-separator") // Breadcrumb
	DotSeparator      = Class("has-dot-separator")    // Breadcrumb
	FixedSize         = Class("has-fixed-size")       // Textarea
	HasDropdown       = Class("has-dropdown")         // NavbarItem
	Heading           = Class("heading")
	IconsLeft         = Class("has-icons-left")           // Control
	IconsRight        = Class("has-icons-right")          // Control
	SemiBold          = Class("has-text-weight-semibold") // any text element
	Ratio             = Class("has-ratio")                // Image/*
	Shadow            = Class("has-shadow")               // Navbar
	SucceedsSeparator = Class("has-succeeds-separator")   // Breadcrumb
	TextCentered      = Class("has-text-centered")        // any text element (responsive variants are supported)
	TextJustified     = Class("has-text-justified")       // any text element (responsive variants are supported)
	TextLeft          = Class("has-text-left")            // any text element (responsive variants are supported)
	TextLight         = Class("has-text-weight-light")    // any text element
	TextMedium        = Class("has-text-weight-medium")   // any text element
	TextNormal        = Class("has-text-weight-normal")   // any text element
	TextRight         = Class("has-text-right")           // any text element (responsive variants are supported)
)

"has-" classes

View Source 
const (
	JSCloseThisDropdown  = `this.closest(".dropdown").classList.remove("is-active")`
	JSOpenThisDropdown   = `this.closest(".dropdown").classList.add("is-active")`
	JSToggleThisDropdown = `this.closest(".dropdown").classList.toggle("is-active")`

	JSCloseThisModal  = `this.closest(".modal").classList.remove("is-active")`
	JSOpenThisModal   = `this.closest(".modal").classList.add("is-active")`
	JSToggleThisModal = `this.closest(".modal").classList.toggle("is-active")`

	JSCloseThisNavbarItem  = `this.closest(".navbar-item").classList.remove("is-active")`
	JSOpenThisNavbarItem   = `this.closest(".navbar-item").classList.add("is-active")`
	JSToggleThisNavbarItem = `this.closest(".navbar-item").classList.toggle("is-active")`

	JSRemoveThisNotification = `this.closest(".notification").parentNode.removeChild(this.closest(".notification"))`

	JSCloseMe  = `this.classList.remove("is-active")`
	JSOpenMe   = `this.classList.add("is-active")`
	JSToggleMe = `this.classList.toggle("is-active")`
)

Javascript code which applied to the current element, from any of its children.

Variables

View Source 
var (
	Gap0             = MultiClass{[]string{"is-0"}, []string{"is-variable"}}              // Columns
	Gap1             = MultiClass{[]string{"is-1"}, []string{"is-variable"}}              // Columns
	Gap2             = MultiClass{[]string{"is-2"}, []string{"is-variable"}}              // Columns
	Gap3             = MultiClass{[]string{"is-3"}, []string{"is-variable"}}              // Columns
	Gap4             = MultiClass{[]string{"is-4"}, []string{"is-variable"}}              // Columns
	Gap5             = MultiClass{[]string{"is-5"}, []string{"is-variable"}}              // Columns
	Gap6             = MultiClass{[]string{"is-6"}, []string{"is-variable"}}              // Columns
	Gap7             = MultiClass{[]string{"is-7"}, []string{"is-variable"}}              // Columns
	Gap8             = MultiClass{[]string{"is-8"}, []string{"is-variable"}}              // Columns
	GroupedCentered  = MultiClass{Static: []string{"is-grouped", "is-grouped-centered"}}  // Field
	GroupedMultiline = MultiClass{Static: []string{"is-grouped", "is-grouped-multiline"}} // Field
	GroupedRight     = MultiClass{Static: []string{"is-grouped", "is-grouped-right"}}     // Field
	ToggleRounded    = MultiClass{nil, []string{"is-toggle", "is-toggle-rounded"}}        // Tabs
)

"is-" classes with automatic adding of other class

View Source 
var (
	AddonsCentered = MultiClass{Static: []string{"has-addons", "has-addons-centered"}} // Field
	AddonsRight    = MultiClass{Static: []string{"has-addons", "has-addons-right"}}    // Field
	HasDropup      = MultiClass{Static: []string{"has-dropdown", "has-dropdown-up"}}   // NavbarItem
)

"has-" classes with automatic adding of other class

View Source 
var (
	// Base colors
	White   = ColorClass{"white", false}
	Black   = ColorClass{"black", false}
	Light   = ColorClass{"light", false}
	Dark    = ColorClass{"dark", false}
	Primary = ColorClass{"primary", false}
	Link    = ColorClass{"link", false}
	Info    = ColorClass{"info", false}
	Success = ColorClass{"success", false}
	Warning = ColorClass{"warning", false}
	Danger  = ColorClass{"danger", false}

	// Shades of grey
	BlackBis    = ColorClass{"black-bis", false}
	BlackTer    = ColorClass{"black-ter", false}
	GreyDarker  = ColorClass{"grey-darker", false}
	GreyDark    = ColorClass{"grey-dark", false}
	Grey        = ColorClass{"grey", false}
	GreyLight   = ColorClass{"grey-light", false}
	GreyLighter = ColorClass{"grey-lighter", false}
	WhiteTer    = ColorClass{"white-ter", false}
	WhiteBis    = ColorClass{"white-bis", false}

	// Light variants
	PrimaryLight = ColorClass{"primary", true}
	LinkLight    = ColorClass{"link", true}
	InfoLight    = ColorClass{"info", true}
	SuccessLight = ColorClass{"success", true}
	WarningLight = ColorClass{"warning", true}
	DangerLight  = ColorClass{"danger", true}
)
View Source 
var CSS []byte

CSS is the default Bulma CSS content

View Source 
var Checked = gomponents.Attr("checked")

Checked, when provided as a child of Radio or RadioDisabled, makes it so the radio button is checked.

Functions

func CSSHandlerFunc 

func CSSHandlerFunc(w http.ResponseWriter, _ *http.Request)

CSSHandlerFunc is a http handler function that writes the Bulma CSS

func Cell 

func Cell(children ...any) cell

Cell creates a table cell.

func Container 

func Container(children ...any) container

Container creates a container element.

func ContainerFluid 

func ContainerFluid(children ...any) container

ContainerFluid creates a container element without a maximum width, but which keeps the left and right margins.

func ContainerFullHD 

func ContainerFullHD(children ...any) container

ContainerFullHD creates a container element which is fullwidth up to the full HD breakpoint.

func ContainerMaxDesktop 

func ContainerMaxDesktop(children ...any) container

ContainerMaxDesktop creates a container element which has a max width of the desktop breakpoint.

func ContainerMaxWidescreen 

func ContainerMaxWidescreen(children ...any) container

ContainerMaxWidescreen creates a container element which has a max width of the widescreen breakpoint.

func ContainerWidescreen 

func ContainerWidescreen(children ...any) container

ContainerWidescreen creates a container element which is fullwidth up to the widescreen breakpoint.

func FootRow 

func FootRow(children ...any) row

FootRow creates a table footer row (tr element).

  • when a child is created by Cell, it is added as a th element
  • when a child is a string, it is wrapped in a th element
  • when a child is a gomponents.Node with type gomponents.ElementType, it is wrapped in a th element
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as-is to the tr element
  • all other types are added as-is to the tr element

The following modifiers change the row behaviour:

  • Selected: mark the row as selected

func HTML 

func HTML(children ...any) gomponents.Node

HTML returns a gomponents.Node which represents a whole HTML page.

  • when a child is of type CSSPath, the path to the Bulma CSS is set to the provided path (if there is no child with this type, the path is set to the Bulma CDN)
  • when a child is of type HTitle, it is used as the page title
  • when a child is of type Language, it is used as the lang attribute
  • when a child is of type Description, it is used as the description meta
  • when a child is wrapped with Head, it is used as a part of the head section
  • other children are used as children of the body element
func Head(children ...gomponents.Node) head

Head identifies children as part of the head section

func HeadRow 

func HeadRow(children ...any) row

HeadRow creates a table header row (tr element).

  • when a child is created by Cell, it is added as a th element
  • when a child is a string, it is wrapped in a th element
  • when a child is a gomponents.Node with type gomponents.ElementType, it is wrapped in a th element
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added to the tr element
  • all other types are added as-is to the tr element

The following modifiers change the row behaviour:

  • Selected: mark the row as selected

func HeroFoot 

func HeroFoot(children ...any) heroPart

HeroFoot marks children as belonging to the foot part of a hero element.

func HeroHead 

func HeroHead(children ...any) heroPart

HeroHead marks children as belonging to the head part of a hero element.

func IsAttribute 

func IsAttribute(node any) bool

IsAttribute returns true if the provided argument is a gomponents.Node with type gomponents.AttributeType.

func JSClose 

func JSClose(id string) string

JSClose returns javascript code that removed the "is-active" class from the element with the provided ID.

func JSOpen 

func JSOpen(id string) string

JSOpen returns javascript code that adds the "is-active" class to the element with the provided ID.

func JSToggle 

func JSToggle(id string) string

JSToggle returns javascript code that toggles the "is-active" class on the element with the provided ID.

func MediaLeft 

func MediaLeft(children ...any) mediaPart

MediaLeft marks children as belonging to the left part of a media element.

func MediaRight 

func MediaRight(children ...any) mediaPart

MediaRight marks children as belonging to the right part of a media element.

func ModalCardFoot 

func ModalCardFoot(children ...any) modalCardFoot

ModalCardFoot designates children to be part of the card head.

func ModalCardHead 

func ModalCardHead(children ...any) modalCardHead

ModalCardHead designates children to be part of the card head. 

func NavbarBrand(children ...any) navbarBrand

NavbarBrand designates children to be part of the navbar brand section. 

func NavbarEnd(children ...any) navbarEnd

NavbarEnd designates children to be part of the navbar end section. 

func NavbarStart(children ...any) navbarStart

NavbarStart designates children to be part of the navbar start section.

func On 

func On(event, script string) gomponents.Node

On adds a "on<event>" attribute to a gomponents.Node element.

func OnClick 

func OnClick(script string) gomponents.Node

OnClick adds a "onclick" attribute to a gomponents.Node element.

func Row 

func Row(children ...any) row

Row creates a table body row (tr element).

  • when a child is created by Cell, it is added as a td element
  • when a child is a string, it is wrapped in a td element
  • when a child is a gomponents.Node with type gomponents.ElementType, it is wrapped in a td element
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as-is to the tr element
  • all other types are added as-is to the tr element

The following modifiers change the row behaviour:

  • Selected: mark the row as selected

func Rows 

func Rows(rows int) gomponents.Node

Rows changes a textarea height.

func Script 

func Script(path string) head

Script returns a head node which makes the browser load the provided path as a JS script.

func Stylesheet 

func Stylesheet(path string) head

Stylesheet returns a head node which makes the browser load the provided path as a CSS stylesheet.

Types

type CSSPath 

type CSSPath string

CSSPath, when provided to HTML, sets the path to the Bulma CSS

type Class 

type Class string

Class is an Element modifier to apply a HTML class.

func Margin 

func Margin(s Spacing) Class

Margin sets all margins on the element.

func MarginBottom 

func MarginBottom(s Spacing) Class

MarginBottom sets the bottom margin on the element.

func MarginHorizontal 

func MarginHorizontal(s Spacing) Class

MarginHorizontal sets the left and right margins on the element.

func MarginLeft 

func MarginLeft(s Spacing) Class

MarginLeft sets the left margin on the element.

func MarginRight 

func MarginRight(s Spacing) Class

MarginRight sets the right margin on the element.

func MarginTop 

func MarginTop(s Spacing) Class

MarginTop sets the top margin on the element.

func MarginVertical 

func MarginVertical(s Spacing) Class

MarginVertical sets the top and bottom margins on the element.

func Padding 

func Padding(s Spacing) Class

Padding sets all paddings on the element.

func PaddingBottom 

func PaddingBottom(s Spacing) Class

PaddingBottom sets the bottom padding on the element.

func PaddingHorizontal 

func PaddingHorizontal(s Spacing) Class

PaddingHorizontal sets the left and right paddings on the element.

func PaddingLeft 

func PaddingLeft(s Spacing) Class

PaddingLeft sets the left padding on the element.

func PaddingRight 

func PaddingRight(s Spacing) Class

PaddingRight sets the right padding on the element.

func PaddingTop 

func PaddingTop(s Spacing) Class

PaddingTop sets the top padding on the element.

func PaddingVertical 

func PaddingVertical(s Spacing) Class

PaddingVertical sets the top and bottom paddings on the element.

func (Class) Desktop 

func (c Class) Desktop() Class

Desktop makes the class apply on desktop and larger screens (only for classes supporting responsiveness).

func (Class) DesktopOnly 

func (c Class) DesktopOnly() Class

DesktopOnly makes the class apply on desktop screens only (only for classes supporting responsiveness).

func (Class) FullHD 

func (c Class) FullHD() Class

FullHD makes the class apply on full hd screens only (only for classes supporting responsiveness).

func (Class) Mobile 

func (c Class) Mobile() Class

Mobile makes the class apply on mobile and larger screens (only for classes supporting responsiveness).

func (Class) Tablet 

func (c Class) Tablet() Class

Tablet makes the class apply on tablet and larger screens (only for classes supporting responsiveness).

func (Class) TabletOnly 

func (c Class) TabletOnly() Class

TabletOnly makes the class apply on tablet screens only (only for classes supporting responsiveness).

func (Class) Touch 

func (c Class) Touch() Class

Touch makes the class apply on touch screens (mobile and tablet) only (only for classes supporting responsiveness).

func (Class) Widescreen 

func (c Class) Widescreen() Class

Widescreen makes the class apply on widescreen and larger screens (only for classes supporting responsiveness).

func (Class) WidescreenOnly 

func (c Class) WidescreenOnly() Class

WidescreenOnly makes the class apply on widescreen screens only (only for classes supporting responsiveness).

type ColorClass 

type ColorClass struct {
	// contains filtered or unexported fields
}

ColorClass defines a color for an element.

func (ColorClass) Background 

func (c ColorClass) Background() Class

Background returns the "has-background-*" version of the color

func (ColorClass) BackgroundDark 

func (c ColorClass) BackgroundDark() Class

BackgroundDark returns the "has-background-*-dark" version of the color

func (ColorClass) BackgroundLight 

func (c ColorClass) BackgroundLight() Class

BackgroundLight returns the "has-background-*-light" version of the color

func (ColorClass) IconDark 

func (c ColorClass) IconDark() Class

func (ColorClass) IconLight 

func (c ColorClass) IconLight() Class

IconLight returns the "light" variant of the

func (ColorClass) Text 

func (c ColorClass) Text() Class

Text returns the "has-text-*" version of the color

func (ColorClass) TextDark 

func (c ColorClass) TextDark() Class

TextDark returns the "has-text-*-dark" version of the color

func (ColorClass) TextLight 

func (c ColorClass) TextLight() Class

TextLight returns the "has-text-*-light" version of the color

type Description 

type Description string

Description, when provided to HTML, sets the description metadata

type Element 

type Element struct {
	// contains filtered or unexported fields
}

Element is a single element.

func AHref 

func AHref(href string, children ...any) *Element

AHref creates an a element, with the provided href.

func Abbr 

func Abbr(title string, children ...any) *Element

Abbr creates an abbr element, with the provided title.

func Block 

func Block(children ...any) *Element

Block creates a block element.

func BottomNavbar 

func BottomNavbar(children ...any) *Element

BottomNavbar, which must be used as an argument to HTML (which means it will be added to the body), adds a fixed-to-bottom navbar. It automatically adds the "has-navbar-fixed-bottom" class to the body.

Please refer to the Navbar documentation for description of its behaviour.

func Box 

func Box(children ...any) *Element

Box creates a box element. 

func Breadcrumb(children ...any) *Element

Breadcrumb creates a breadcrumb.

The following modifiers change the breadcrumb behaviour:

  • Centered: center the breadcrumb in its container
  • Right: align the breadcrumb on the right

The following modifiers change the separator:

  • ArrowSeparator: use an arrow as the separator
  • BulletSeparator: use a bullet as the separator
  • DotSeparator: use a small dot as the separator
  • SucceedsSeparator: use a "succeed" character as the separator

The following modifiers change the breadcrumb size:

  • Small
  • Medium
  • Large
func BreadcrumbAHref(href string, children ...any) *Element

BreadcrumbAHref creates a breadcrumb entry which contains a link to the provided URL.

It is better than BreadcrumbEntry(AHref(href, children...)), because it ensures text is enclosed in span if a child is an icon. 

func BreadcrumbActiveAHref(href string, children ...any) *Element

BreadcrumbActiveAHref creates an active breadcrumb entry which contains a link to the provided URL.

It is better than BreadcrumbEntry(Active, AHref(href, children)), because it ensures text is enclosed in span if a child is an icon. 

func BreadcrumbEntry(children ...any) *Element

BreadcrubmbEntry creates a generic breadcrumb entry.

func Button 

func Button(children ...any) *Element

Button creates a button.

In order to disable the button, use html.Disabled().

If the button contains an icon, all other elements are automatically wrapped in spans.

The following modifiers change the button behaviour:

  • Text: display as an underlined text
  • Ghost: display as a blue underlined link
  • Responsive: responsive size
  • FullWidth: take the whole width
  • Outlined: outline style
  • Inverted: inverted style
  • Rounded: rounded button
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Active: apply the active style
  • Loading: replace the content with a loading spinner
  • Static: make the button non-interactive
  • html.Disabled(): disable the button
  • Selected: in a list of attached buttons (Buttons with Addons), make sure this button is above the other buttons

The following modifiers change the button size:

  • Small
  • Normal
  • Medium
  • Large

The following modifiers change the button color:

  • White
  • Light
  • Dark
  • Black
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight

func ButtonA 

func ButtonA(children ...any) *Element

ButtonA creates a button-looking link.

See the documentation on the Button function for modifiers details.

func ButtonInputReset 

func ButtonInputReset(value string, children ...any) *Element

ButtonInputReset creates an input of type reset.

See the documentation on the Button function for modifiers details.

func ButtonInputSubmit 

func ButtonInputSubmit(value string, children ...any) *Element

ButtonInputSubmit creates an input of type submit.

See the documentation on the Button function for modifiers details.

func ButtonSubmit 

func ButtonSubmit(children ...any) *Element

ButtonSubmit creates a submit button.

See the documentation on the Button function for modifiers details.

func Buttons 

func Buttons(children ...any) *Element

Buttons creates a list of buttons.

The following modifiers change the list of buttons behaviour:

  • Addons: attach the buttons together
  • Centered: center the buttons
  • Right: align the buttons to the right

The following modifiers change the size of all buttons in the list:

  • Small
  • Medium
  • Large

func Card 

func Card(children ...any) *Element

Card creates a card.

func CardContent 

func CardContent(children ...any) *Element

CardContent creates a card content.

func CardFooter 

func CardFooter(children ...any) *Element

CardFooter creates a card footer.

It add the "card-footer-item" class to all its *Element children.

func CardHeader 

func CardHeader(children ...any) *Element

CardHeader creates a card header.

If a child is a string, it is wrapped into a CardHeaderTitle element.

If a child is an *Element with class "icon", it is wrapped into a CardHeaderIcon element.

func CardHeaderIcon 

func CardHeaderIcon(children ...any) *Element

CardHeaderIcon creates an icon for a card header.

If you provide an *Element with class "icon" to the CardHeader function (ie. / the result of the Icon function), you don't need CardHeaderIcon.

func CardHeaderTitle 

func CardHeaderTitle(children ...any) *Element

CardHeaderTitle creates a title for a card header.

If you provide a string to the CardHeader function, you don't need CardHeaderTitle.

func CardImage 

func CardImage(children ...any) *Element

CardImage creates a card image.

See the Image function documentation for the list of allowed modifiers.

func CardImageImg 

func CardImageImg(src string, children ...any) *Element

CardImageImg creates a card image which contains an img element with the provided src.

See the ImageImg function documentation for the list of allowed modifiers.

func Checkbox 

func Checkbox(children ...any) *Element

Checkbox creates a checkbox input element.

func CheckboxDisabled 

func CheckboxDisabled(children ...any) *Element

CheckboxDisabled creates a disabled checkbox input element.

func Column 

func Column(children ...any) *Element

Column creates a single column.

The following modifiers change its width:

  • Full, Size12: 100%
  • Size11: 91.66%
  • Size10: 83.33%
  • FourFifths: 80%
  • ThreeQuarters, Size9: 75%
  • TwoThirds, Size8: 66.66%
  • ThreeFifths: 60%
  • Size7: 58.33%
  • Half, Size6: 50%
  • Size5: 41.66%
  • TwoFifths: 40%
  • OneThird, Size4: 33.33%
  • OneQuarter, Size3: 25%
  • OneFifth: 20%
  • Size2: 16.66%
  • Size1: 8.33%

The following modifiers add an offset before the column:

  • Offset11: 91.66%
  • Offset10: 83.33%
  • OffsetFourFifths: 80%
  • OffsetThreeQuarters, Offset9: 75%
  • OffsetTwoThirds, Offset8: 66%
  • OffsetThreeFifths: 60%
  • Offset7: 58.33%
  • OffsetHalf, Offset6: 50%
  • Offset5: 41.66%
  • OffsetTwoFifths: 40%
  • OffsetOneThird, Offset4: 33%
  • OffsetOneQuarter, Offset3: 25%
  • OffsetOneFifth: 20%
  • Offset2: 16.66%
  • Offset1: 8.33%

The width may be breakpoint-based, by calling .Mobile() to .FullHD() on the size modifier(s).

The following modifiers change the columns behaviour:

  • Narrow: the column takes only the width it needs

the narrow behaviour may be breakpoint-based, by using Narrow.Mobile() to Narrow.FullHD().

func Columns 

func Columns(children ...any) *Element

Columns creates a columns container.

Each child is automatically wrapped in a new Column element if:

  • it is an *Element but not generated with Column
  • it is a gomponents.Node with type gomponents.ElementType

The following modifiers change the gap:

  • Gapless: no gap
  • Gap0: no gap ("is-variable" is automatically added)
  • Gap1: 0.25rem gap ("is-variable" is automatically added)
  • Gap2: 0.5rem gap ("is-variable" is automatically added)
  • Gap3: 0.75rem gap ("is-variable" is automatically added)
  • Gap4: 1rem gap ("is-variable" is automatically added)
  • Gap5: 1.25rem gap ("is-variable" is automatically added)
  • Gap6: 1.5rem gap ("is-variable" is automatically added)
  • Gap7: 1.75rem gap ("is-variable" is automatically added)
  • Gap8: 2rem gap ("is-variable" is automatically added)

The gap may be breakpoint-based, with Gap*.Mobile() to Gap*.FullHD().

The following modifiers change the columns behaviour:

  • Centered: center columns
  • Desktop: allow columns only on desktops upward (not on tablets)
  • Mobile: allow columns on mobile phones too
  • Multiline: create a new line when columns do not fit in a single line
  • VCentered: align columns vertically

func Content 

func Content(children ...any) *Element

Content creates a content element.

The following modifiers change the text size in the content:

  • Small
  • Normal
  • Medium
  • Large

Add one of the the following modifiers to Ol elements in order to change the list style: OlLowerAlpha, OlLowerRoman, OlUpperAlpha, OlUpperRoman.

func Control 

func Control(children ...any) *Element

Control creates a control element, to be used as a child of a Field.

The following modifiers change the control behaviour:

  • IconsLeft: leave place on the left side of the Input* or Select child for an icon - the Icon element must be a direct child of Control and have the Left modifier
  • IconsRight: leave place on the right side of the Input* or Select child for an icon - the Icon element must be a direct child of Control and have the Right modifier
  • Expanded: make the contained element take the remaining space - to apply this style to a Select, you also need to add the FullWidth modifier to the Select element

func DList 

func DList(dtDds ...any) *Element

DList creates a dl element, with the provided children as alternatively dt and dd elements.

func Delete 

func Delete(children ...any) *Element

Delete creates a delete button.

The following modifiers change the button size:

  • Small
  • Normal
  • Medium
  • Large

func DeleteTag 

func DeleteTag(children ...any) *Element

DeleteTag creates a tag which is a delete button-looking a element. 

func Dropdown(triggerButton, menu *Element, children ...any) *Element

Dropdown creates a dropdown.

The triggerButton argument must be created with Button. The menu argument must be created with DropdownMenu.

The following modifiers change the dropdown behaviour:

  • Active: open the menu
  • Hoverable: make it so the menu opens when the cursor hovers the button
func DropdownAHref(href string, children ...any) *Element

DropdownAHref creates an AHref element which is a dropdown item. 

func DropdownDivider() *Element

DropdownDivider creates a dropdown divider. 

func DropdownItem(children ...any) *Element

DropdownItem creates a div which is a dropdown item. 

func DropdownMenu(children ...any) *Element

DropdownMenu creates a dropdown menu.

Each child is automatically wrapped in a new dropdown-item element if:

  • it is an *Element but not generated with DropdownItem or DropdownHref or DropdownDivider
  • it is a gomponents.Node with type gomponents.ElementType

func Dropup 

func Dropup(triggerButton, menu *Element, children ...any) *Element

Dropup creates a dropdown which opens to the top.

The triggerButton argument must be created with Button. The menu argument must be created with DropdownMenu.

The following modifiers change the dropdown behaviour:

  • Active: open the menu
  • Hoverable: make it so the menu opens when the cursor hovers the button

func Elem 

func Elem(elemFn func(...gomponents.Node) gomponents.Node) *Element

Elem creates a base element, based on the provided gomponents.Node function.

func Field 

func Field(children ...any) *Element

Field creates a field element.

The following modifiers change the field behaviour:

  • Addons: attach the children controls (Input*, Button* or Select) together
  • AddonsCentered: attach the children controls (Input*, Button* or Select) together and center them (Addons is not required)
  • AddonsCentered: attach the children controls (Input*, Button* or Select) together and align them to the right (Addons is not required)
  • Grouped: group the children controls together, without attaching them
  • GroupedCentered: group the children controls together, without attaching them and center them (Grouped is not required)
  • GroupedRight: group the children controls together, without attaching them and align them to the right (Grouped is not required)
  • GroupedMultiline: group the children controls together, without attaching them and allow them to fill up multiple lines (Grouped is not required)
  • Horizontal: make the field horizontal ()

func FieldBody 

func FieldBody(children ...any) *Element

FieldBody creates a field-body element, to be used as a child of a FieldHorizontal.

func FieldHorizontal 

func FieldHorizontal(children ...any) *Element

FieldHorizontal creates a horizontal field, including an empty body if

func FieldLabel 

func FieldLabel(children ...any) *Element

FieldLabel creates a field-label element, to be used as a child of a FieldHorizontal.

func File 

func File(children ...any) *Element

File creates a file input element.

  • when a child is a string, it is used as the call-to-action label
  • when a child is a FileName, it is the content of the file-name element
  • when a child is a FileNameAutoUpdate, it is the content of the file-name element, which changes when a file is selected

The following modifiers change the file input behaviour:

  • Right: move the call-to-action to the right side, align the file input to the right
  • FullWidth: expand the name to fill up the space
  • Boxed: make the input a boxed block
  • Centered: align the file input to the center

The following modifiers change the file input color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the file input size:

  • Small
  • Normal
  • Medium
  • Large

func FlexIconText 

func FlexIconText(children ...any) *Element

IconText creates a flex icon-text span and embed all its non-icons children into spans.

The following modifiers change the icon and text color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • BlackBis
  • BlackTer
  • GreyDarker
  • GreyDark
  • Grey
  • GreyLight
  • GreyLighter
  • WhiteTer
  • WhiteBis
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight
  • PrimaryDark
  • LinkDark
  • InfoDark
  • SuccessDark
  • WarningDark
  • DangerDark
func Footer(children ...any) *Element

Footer creates a footer element.

func Help 

func Help(children ...any) *Element

Help creates a help element, to be used as a child of a Field.

func Hero 

func Hero(children ...any) *Element

Hero creates a hero element.

  • when a child is a return value of HeroHead, it is added in the head part of the hero element
  • when a child is a return value of HeroFoot, it is added in the foot part of the hero element
  • when a child is an *Element, it is added in the body part of the hero element
  • when a child is a return value of Container*, it is added in the body part of the hero element
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as a direct child of to the hero element
  • when a child is a gomponents.Node with another type, it is added in the body part of the hero element
  • other children types are added as direct children of to the hero element

Each of the head, body and foot parts is only included if it has content.

The following modifiers change the hero color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the hero size:

  • Small
  • Medium
  • Large
  • HalfHeight
  • FullHeight
  • FullHeightWithNavbar

func Icon 

func Icon(children ...any) *Element

Icon creates an icon span.

The following modifiers change the icon color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • BlackBis
  • BlackTer
  • GreyDarker
  • GreyDark
  • Grey
  • GreyLight
  • GreyLighter
  • WhiteTer
  • WhiteBis
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight
  • PrimaryDark
  • LinkDark
  • InfoDark
  • SuccessDark
  • WarningDark
  • DangerDark

The following modifiers change the icon size:

  • Small
  • Medium
  • Large

func IconText 

func IconText(children ...any) *Element

IconText creates an icon-text span and embed all its non-icons children into spans.

The following modifiers change the icon and text color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • BlackBis
  • BlackTer
  • GreyDarker
  • GreyDark
  • Grey
  • GreyLight
  • GreyLighter
  • WhiteTer
  • WhiteBis
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight
  • PrimaryDark
  • LinkDark
  • InfoDark
  • SuccessDark
  • WarningDark
  • DangerDark

func Image 

func Image(children ...any) *Element

Image creates a figure element with class "image".

The following modifiers change the image behaviour:

  • ImgSq16: fixed square image, of 16x16px
  • ImgSq24: fixed square image, of 24x24px
  • ImgSq32: fixed square image, of 32x32px
  • ImgSq48: fixed square image, of 48x48px
  • ImgSq64: fixed square image, of 64x64px
  • ImgSq96: fixed square image, of 96x96px
  • ImgSq128 : fixed square image, of 128x128px
  • ImgSquare: force image ratio to square
  • Img1By1: force image ratio to 1 by 1
  • Img5By4: force image ratio to 5 by 4
  • Img4By3: force image ratio to 4 by 3
  • Img3By2: force image ratio to 3 by 2
  • Img5By3: force image ratio to 5 by 3
  • Img16By9: force image ratio to 16 by 9
  • Img2By1: force image ratio to 2 by 1
  • Img3By1: force image ratio to 3 by 1
  • Img4By5: force image ratio to 4 by 5
  • Img3By4: force image ratio to 3 by 4
  • Img2By3: force image ratio to 2 by 3
  • Img3By5: force image ratio to 3 by 5
  • Img9By16: force image ratio to 9 by 16
  • Img1By2: force image ratio to 1 by 2
  • Img1By3: force image ratio to 1 by 3
  • FullWidth: make sure the image takes the whole width of its container (usually not needed)

Use the Rounded modifier on the inner image to make it rounded (associate with an ImgSq* modifier on the Image element).

Use the Ratio modifier on the inner element (other than image) in order to apply it the ratio (associate with an Img*By* modifier on the Image element).

func ImageImg 

func ImageImg(src string, children ...any) *Element

ImageImg creates a figure element with class "image" and the inner img element, with the provided src.

Use ImgAlt to define the image alt text.

The following modifiers change the image behaviour:

  • ImgSq16: fixed square image, of 16x16px
  • ImgSq24: fixed square image, of 24x24px
  • ImgSq32: fixed square image, of 32x32px
  • ImgSq48: fixed square image, of 48x48px
  • ImgSq64: fixed square image, of 64x64px
  • ImgSq96: fixed square image, of 96x96px
  • ImgSq128 : fixed square image, of 128x128px
  • ImgSquare: force image ratio to square
  • Img1By1: force image ratio to 1 by 1
  • Img5By4: force image ratio to 5 by 4
  • Img4By3: force image ratio to 4 by 3
  • Img3By2: force image ratio to 3 by 2
  • Img5By3: force image ratio to 5 by 3
  • Img16By9: force image ratio to 16 by 9
  • Img2By1: force image ratio to 2 by 1
  • Img3By1: force image ratio to 3 by 1
  • Img4By5: force image ratio to 4 by 5
  • Img3By4: force image ratio to 3 by 4
  • Img2By3: force image ratio to 2 by 3
  • Img3By5: force image ratio to 3 by 5
  • Img9By16: force image ratio to 9 by 16
  • Img1By2: force image ratio to 1 by 2
  • Img1By3: force image ratio to 1 by 3
  • FullWidth: make sure the image takes the whole width of its container (usually not needed)
  • Rounded: make the image rounded (associate with an ImgSq* modifier)

func ImgSrc 

func ImgSrc(src string, children ...any) *Element

ImgSrc creates an img element, with the provided src.

func InputEmail 

func InputEmail(children ...any) *Element

InputEmail creates an input element of type email.

The following modifiers change the input behaviour:

  • Rounded: rounded inputs
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the input
  • html.Disabled(): disable the input
  • html.ReadOnly(): forbid modifications
  • Static: remove specific styling but maintain vertical spacing

The following modifiers change the input color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the file input size:

  • Small
  • Normal
  • Medium
  • Large

func InputPassword 

func InputPassword(children ...any) *Element

InputPassword creates an input element of type password.

The following modifiers change the input behaviour:

  • Rounded: rounded inputs
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the input
  • html.Disabled(): disable the input
  • html.ReadOnly(): forbid modifications
  • Static: remove specific styling but maintain vertical spacing

The following modifiers change the input color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the file input size:

  • Small
  • Normal
  • Medium
  • Large

func InputTel 

func InputTel(children ...any) *Element

InputTel creates an input element of type tel.

The following modifiers change the input behaviour:

  • Rounded: rounded input
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the input
  • html.Disabled(): disable the input
  • html.ReadOnly(): forbid modifications
  • Static: remove specific styling but maintain vertical spacing

The following modifiers change the input color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the input size:

  • Small
  • Normal
  • Medium
  • Large

func InputText 

func InputText(children ...any) *Element

InputText creates an input element of type text.

The following modifiers change the input behaviour:

  • Rounded: rounded inputs
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the input
  • html.Disabled(): disable the input
  • html.ReadOnly(): forbid modifications
  • Static: remove specific styling but maintain vertical spacing

The following modifiers change the input color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the file input size:

  • Small
  • Normal
  • Medium
  • Large

func Label 

func Label(children ...any) *Element

Label creates a label element, to be used as a child of a Field.

func Level 

func Level(children ...any) *Element

Level creates a level element, which should contain either LevelLeft and/or LevelRight children, or LevelItem children.

  • when a child is the return value of LevelItem, LevelLeft or LevelRight, it is added as a child to the level
  • when a child is any other *Element, it is wrapped into a LevelItem and added as a child to the level
  • when a child is a container, it is wrapped into a LevelItem and added as a child to the level
  • when a child is a string, it is wrapped into a LevelItem and added as a child to the level
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as an attribute to the level
  • when a child is a gopmponents.Node with another type, it is wrapped into a LevelItem and added as a child to the level
  • other children types are added as children to the level

The following modifiers change the level behaviour:

  • Mobile: show the level horizontally on mobile too (otherwise, the level items are placed vertically)

func LevelItem 

func LevelItem(children ...any) *Element

LevelItem creates a level item, to be used as a child for LevelLeft, LevelRight or Level elements.

func LevelLeft 

func LevelLeft(children ...any) *Element

LevelLeft creates the left section of a level.

  • when a child is the return value of LevelItem, it is added as a child to the level section
  • when a child is any other *Element, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a container, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a string, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as an attribute to the level section
  • when a child is a gopmponents.Node with another type, it is wrapped into a LevelItem and added as a child to the level section
  • other children types are added as children to the level section

func LevelRight 

func LevelRight(children ...any) *Element

LevelLeft creates the right section of a level.

  • when a child is the return value of LevelItem, it is added as a child to the level section
  • when a child is any other *Element, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a container, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a string, it is wrapped into a LevelItem and added as a child to the level section
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as an attribute to the level section
  • when a child is a gopmponents.Node with another type, it is wrapped into a LevelItem and added as a child to the level section
  • other children types are added as children to the level section

func Media 

func Media(children ...any) *Element

Media creates a media element.

  • when a child is a return value of MediaLeft, it is added in the left part of the media element
  • when a child is a return value of MediaRight, it is added in the right part of the media element
  • when a child is an *Element, it is added in the content part of the media element
  • when a child is a return value of Container*, it is added in the content part of the media element
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as a direct child of to the media element
  • when a child is a gomponents.Node with another type, it is added in the content part of the media element
  • other children types are added as direct children of to the media element

Each of the left, content and right parts is only included if it has content. 

func Menu(children ...any) *Element

Menu creates a menu. 

func MenuEntry(children ...any) *Element

MenuEntry creates an entry for a menu list. 

func MenuLabel(children ...any) *Element

MenuLabel creates a menu label. 

func MenuList(children ...any) *Element

MenuList creates a menu list. 

func MenuSublist(children ...any) *Element

MenuSublist creates a menu sublist.

func Message 

func Message(children ...any) *Element

Message creates a message.

The following modifiers change the message color:

  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

When there is no MessageHeader in the children, the message is displayed with the "message body only" style.

func MessageBody 

func MessageBody(children ...any) *Element

MessageBody creates a message body.

func MessageHeader 

func MessageHeader(children ...any) *Element

MessageHeader creates a message header. 

func Modal(id string, children ...any) *Element

Modal creates a modal. The modal background and the modal close button are automatically added. The children are added to the modal content.

The id is needed at least in order to open the modal from another element.

JSOpen may be used to get a javascript code to execute in order to open the modal, for instance: 

b.Button(
	b.OnClick(b.JSOpen("myModal"))
),
b.Modal("myModal", [...])

func ModalCard 

func ModalCard(id string, children ...any) *Element

ModalCard creates a modal card.

Wrap children in ModalCardHead in order to add them to the card header. Wrap children with ModalCardFoot in order to add them to the card footer. Any unwrapped child is added to the card body.

func ModalCardTitle 

func ModalCardTitle(children ...any) *Element

ModalCardTitle creates a title for a card head. 

func Navbar(children ...any) *Element

Navbar creates a navbar.

  • use NavbarBrand to declare children placed in the brand subsection
  • use NavbarStart to declare children placed in the start subsection
  • use NavbarEnd to declare children placed in the end section
  • if a child is the Container function or one of its derivative (Container*), this function is executed and its result is used as an intermediate container

The brand section is added only if at least one brand, start or end child is provided. The section part and the burger button are added only if at least one start or end child is provided. The click event on the burger, which toggles the navbar menu on mobile devices, is already included.

The FixedTop modifier change the separator fixes the navbar to the top of the window; when it is used, the NavbarFixedTop modifier must be added to the body. It is automatically done when using NavbarTop.

The FixedBottom modifier change the separator fixes the navbar to the bottom of the window; when it is used, the NavbarFixedBottom modifier must be added to the body. It is automatically done when using NavbarBottom.

The following modifiers change the navbar behaviour:

  • Transparent: remove hover and active backgrounds from the items
  • Spaced: increase padding
  • Shadow: add a small shadow around the navbar

The following modifiers change the navbar color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • Black
  • Dark
  • Light
  • White
func NavbarAHref(href string, children ...any) *Element

NavbarAHref creates a link item to add to a navbar brand, start or end section, or to a NavbarDropdown or easy.NavbarDropdown.

The following modifiers change the link item behaviour:

  • Expanded: turn the item into a full-width element
  • Tab: add a bottom border on hover, always show the bottom border when adding Active
func NavbarDivider() *Element

NavbarDivider creates a divider element, to include in a NavbarDropdown or an easy.NavbarDropdown. 

func NavbarDropdown(children ...any) *Element

NavbarDropdown creates a dropdown element, to include in a NavbarItem with the HasDropdown modifier.

The following modifiers change the dropdown behaviour:

  • Boxed: show the dropdown as a boxed element, without the top grey border
  • Right: used when a dropdown is on the right side (end section), in order to open its content aligned to the right of the link

Creating a navbar dropdown is made easier with `easy.NavbarDropdown`, in which case this function is not needed. 

func NavbarItem(children ...any) *Element

NavbarItem creates an item to add to a navbar brand, start or end section, or to a NavbarDropdown or easy.NavbarDropdown.

The following modifiers change the item behaviour:

  • Expanded: turn the item into a full-width element
  • Tab: add a bottom border on hover, always show the bottom border when adding Active

The following modifiers are used for dropdowns:

  • HasDropdown: makes the item a link+dropdown container
  • HasDropup: makes the item a dropdown container, with the dropdown opening above the link (this modifier automatically applies the "has-dropdown" class along with the "has-dropdown-up" class, therefore HasDropdown is not needed in conjuction with HasDropup)
  • Hoverable: makes the included dropdown automatically show on hover
  • Active: force the dropdown to be open
func NavbarLink(children ...any) *Element

NavbarLink creates a link element, to include in a NavbarItem with the HasDropdown modifier.

The following modifiers change the link behaviour:

  • Arrowless: remove the arrow in the item

Creating a navbar dropdown is made easier with `easy.NavbarDropdown`, in which case this function is not needed.

func Notification 

func Notification(children ...any) *Element

Notification creates a notification element.

When you provide a Delete button as a child, you may add the following to the Delete children in order to close the notification: 

OnClick(JSRemoveThisNotification)

The following modifiers change the notification color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight

func OList 

func OList(children ...any) *Element

OList creates an ol element, with the provided children wrapped in li elements. A child may be of type []any in order to add multiple elements in a li.

func Option 

func Option(value string, children ...any) *Element

Option creates an option element, to be used as a child of a Select or SelectMultiple. The value argument is used as the option value attribute.

func OptionSelected 

func OptionSelected(value string, children ...any) *Element

OptionSelected creates a selected option element, to be used as a child of a Select or SelectMultiple. The value argument is used as the option value attribute.

func Pagination 

func Pagination(children ...any) *Element

Pagination creates a pagination element.

The results of PaginationLink and PaginationEllipsis are automatically added in the auto-created "pagination-list" element.

The following modifiers change the pagination behaviour:

  • Centered: center the pagination list ("Previous" on left, "Next" on right)
  • Right: align the pagination list to the right ("Previous" and "Next" on left)
  • Rounded: have rounded pagination buttons

The following modifiers change the pagination size:

  • Small
  • Medium
  • Large

func PaginationEllipsis 

func PaginationEllipsis() *Element

PaginationEllipsis creates an ellipsis element for a pagination. 

func PaginationLink(children ...any) *Element

PaginationLink creates a single page link button for a pagination.

The following modifiers change the link button behaviour:

  • Current: mark this link button as being the current page
  • Disabled: mark the link button as inactive

func PaginationNext 

func PaginationNext(children ...any) *Element

PaginationNext creates the "Next" link button for a pagination.

The following modifiers change the link button behaviour:

  • Disabled: mark the link button as inactive

func PaginationPrevious 

func PaginationPrevious(children ...any) *Element

PaginationPrevious creates the "Previous" link button for a pagination.

The following modifiers change the link button behaviour:

  • Disabled: mark the link button as inactive

func Panel 

func Panel(children ...any) *Element

Panel creates a panel element.

The following modifiers change the panel color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

func PanelBlock 

func PanelBlock(children ...any) *Element

PanelBlock creates a panel block element.

func PanelHeading 

func PanelHeading(children ...any) *Element

PanelHeading creates a panel heading element.

func PanelLabel 

func PanelLabel(children ...any) *Element

PanelLabel creates a label which is a panel block element, which must contain a Checkbox. 

func PanelLink(children ...any) *Element

PanelLink creates a link which is a panel block element.

func PanelTabs 

func PanelTabs(children ...any) *Element

PanelTabs creates a panel tabs element.

Its children must be "a" html elements (for instance AHref). Add the Active modifier to a link to mark it as the active tab.

func Progress 

func Progress(value, max int, children ...any) *Element

Progress creates a progress bar.

The following modifiers change the progress bar color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the progress bar size:

  • Small
  • Normal
  • Medium
  • Large

func ProgressIndeterminate 

func ProgressIndeterminate(children ...any) *Element

ProgressIndeterminate creates an animated progress bar with indeterminate value.

The following modifiers change the progress bar color:

  • White
  • Black
  • Light
  • Dark
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the progress bar size:

  • Small
  • Normal
  • Medium
  • Large

func Radio 

func Radio(children ...any) *Element

Radio creates a radio element, together with its label container.

  • when a child is a string, it is added in the radio label
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as an attribute to the input element
  • when a child is a gopmponents.Node with another type, it is added as a child to the label element
  • when a child is an *Element, it is added in the radio label
  • when a child is a container, it is added in the radio label
  • other childs are added as children to the input element

The following modifiers change the radio behaviour:

  • Checked: make it so the radio button is checked

func RadioDisabled 

func RadioDisabled(children ...any) *Element

RadioDisabled creates a disabled radio element, together with its label container.

  • when a child is a string, it is added in the radio label
  • when a child is a gomponents.Node with type gomponents.AttributeType, it is added as an attribute to the input element
  • when a child is a gopmponents.Node with another type, it is added as a child to the label element
  • when a child is an *Element, it is added in the radio label
  • when a child is a container, it is added in the radio label
  • other childs are added as children to the input element

The following modifiers change the radio behaviour:

  • Checked: make it so the radio button is checked

func ScrollableTable 

func ScrollableTable(children ...any) *Element

ScrollableTable creates a table in a table-container element, making the table scrollable.

See the documentation on the Table function for modifiers details.

func Section 

func Section(children ...any) *Element

Section creates a section element.

The following modifiers change the section behaviour:

  • Medium: medium spacing
  • Large: large spacing

func Select 

func Select(children ...any) *Element

Select creates a dropdown select element. It should contain one or multiple Option elements.

  • when a child is a Class, it is applied to the select element if it is Hovered or Focused, otherwise it is applied to the div element
  • when a child is an *Element, it is added as a child to the select element
  • when a child is a container, it is added as a child to the select element
  • when a child is a Name, it is used as the name attribute of the select element
  • other children are added as children to the div element

The following modifiers change the select behaviour:

  • Rounded: rounded select
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the select (in place of the arrow)

The following modifiers change the select color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the select size:

  • Small
  • Normal
  • Medium
  • Large

func SelectMultiple 

func SelectMultiple(children ...any) *Element

SelectMultiple creates a multiple select element. It should contain one or multiple Option elements.

  • when a child is a Size, it defines the select size
  • when a child is a Class, it is applied to the select element if it is Hovered or Focused, otherwise it is applied to the div element
  • when a child is an *Element, it is added as a child to the select element
  • when a child is a container, it is added as a child to the select element
  • when a child is a Name, it is used as the name attribute of the select element
  • other children types are added as children to the div element

The following modifiers change the select behaviour:

  • Rounded: rounded select
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the select (in place of the arrow)

The following modifiers change the select color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the select size:

  • Small
  • Normal
  • Medium
  • Large

func Subtitle 

func Subtitle(children ...any) *Element

Subtitle creates a h2 subtitle

func Subtitle1 

func Subtitle1(children ...any) *Element

Subitle1 creates a h1 subtitle of size 1

func Subtitle2 

func Subtitle2(children ...any) *Element

Subitle2 creates a h2 subtitle of size 2

func Subtitle3 

func Subtitle3(children ...any) *Element

Subitle3 creates a h3 subtitle of size 3

func Subtitle4 

func Subtitle4(children ...any) *Element

Subitle4 creates a h4 subtitle of size 4

func Subtitle5 

func Subtitle5(children ...any) *Element

Subitle5 creates a h5 subtitle of size 5

func Subtitle6 

func Subtitle6(children ...any) *Element

Subitle6 creates a h6 subtitle of size 6

func Table 

func Table(children ...any) *Element

Table creates a table element.

  • use HeadRow to add a row in the table header
  • use FootRow to add a row in the table footer
  • use Row to add a row in the table body

The following modifiers change the table behaviour:

  • Bordered: add borders
  • Striped: add stripes
  • Narrow: make the cells narrower
  • Table: add a hover effect on each body row
  • FullWidth: take the whole width

func Tabs 

func Tabs(children ...any) *Element

Tabs create a tabs container.

Its arguments must include TabsLink. The ul element is automatically created.

If a child is the Container function or one of its derivative (Container*), this function is executed and its result is used as an intermediate container.

The following modifiers change the tabs behaviour:

  • Centered: center the tabs
  • Right: align the tabs to the right
  • Boxed: draw boxed tabs
  • Toggle: button-looking tabs
  • ToggleRounded: rounded button-looking tabs
  • FullWidth: take the whole width

The following modifiers change the tabs size:

  • Small
  • Medium
  • Large
func TabsLink(children ...any) *Element

TabsLink creates a tab entry which is a link. Use html.Href as an argument to define a link target if needed.

func Tag 

func Tag(children ...any) *Element

Tag creates a tag element.

The following modifiers change the tag color:

  • Black
  • Dark
  • Light
  • White
  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger
  • PrimaryLight
  • LinkLight
  • InfoLight
  • SuccessLight
  • WarningLight
  • DangerLight

The following modifiers change the tag size:

  • Normal
  • Medium
  • Large

func Tags 

func Tags(children ...any) *Element

Tags create a list of tags element.

The following modifiers change the tags list behaviour:

  • Addons: attach the contained tags together

func Textarea 

func Textarea(children ...any) *Element

Textarea creates a textarea element.

The following modifiers change the textarea behaviour:

  • Rows(int): set the textarea heights, in number of rows
  • Hovered: apply the hovered style
  • Focused: apply the focused style
  • Loading: add a a loading spinner to the right of the input
  • html.Disabled(): disable the input
  • html.ReadOnly(): forbid modifications
  • Static: remove specific styling but maintain vertical spacing
  • FixedSize: disable the textarea resizing possibility

The following modifiers change the textarea color:

  • Primary
  • Link
  • Info
  • Success
  • Warning
  • Danger

The following modifiers change the textarea size:

  • Small
  • Normal
  • Medium
  • Large

func Tile 

func Tile(children ...any) *Element

Tile creates a tile element.

If a child is an *Element without the "tile" class, the "tile" and the "is-child" class are added to the child and the "is-parent" class is added to the tile element. This way, the parent-child relation is automatically configured without the need to add specific modifiers.

When a Tile is added as a child of a non-tile *Element, the "is-ancestor" class is added to the Tile.

The following modifiers change its width:

  • Size12: 100%
  • Size11: 91.66%
  • Size10: 83.33%
  • Size9: 75%
  • Size8: 66.66%
  • Size7: 58.33%
  • Size6: 50%
  • Size5: 41.66%
  • Size4: 33.33%
  • Size3: 25%
  • Size2: 16.66%
  • Size1: 8.33%

func Title 

func Title(children ...any) *Element

Title creates a h1 title

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title1 

func Title1(children ...any) *Element

Title1 creates a h1 title of size 1

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title2 

func Title2(children ...any) *Element

Title2 creates a h2 title of size 2

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title3 

func Title3(children ...any) *Element

Title3 creates a h3 title of size 3

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title4 

func Title4(children ...any) *Element

Title4 creates a h4 title of size 4

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title5 

func Title5(children ...any) *Element

Title5 creates a h5 title of size 5

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func Title6 

func Title6(children ...any) *Element

Title6 creates a h6 title of size 6

The following modifiers change the title behaviour:

  • Spaced: maintain normal spacing between title and next subtitle

func TopNavbar 

func TopNavbar(children ...any) *Element

TopNavbar, which must be used as an argument to HTML (which means it will be added to the body), adds a fixed-to-top navbar. It automatically adds the "has-navbar-fixed-top" class to the body.

Please refer to the Navbar documentation for description of its behaviour.

func UList 

func UList(children ...any) *Element

UList creates an ul element, with the provided children wrapped in li elements. A child may be of type []any in order to add multiple elements in a li.

func VTile 

func VTile(children ...any) *Element

VTile creates a tile element with the "is-vertical" class.

func (*Element) Render 

func (e *Element) Render(w io.Writer) error

Render renders the element. With this function, an *Element is a gomponents.Node.

func (*Element) With 

func (e *Element) With(c any) *Element

With adds a child to the element. It accepts the following arguments types:

  • func(...gomponents.Node) gomponents.Node: change the gomponents.Node element for this element
  • Class: add a class to the element
  • MultiClass: add multiple classes to the element
  • ColorClass: add a color class to the element
  • Styles: add one or multiple CSS styles to the element
  • string: add a string to the element (using gomponents.Text)
  • *Element: add the provided element as a child
  • container: add the provided element as a child
  • func(...any) *Element: apply the following parts of that element to the current element: classes, styles, attributes, children
  • gomponents.Node with type gomponents.AttributeType: add the provided attribute to this element
  • gomponents.Node with another time: add the provided element as a child

Any other type is ignored.

func (*Element) Withs 

func (e *Element) Withs(children []any) *Element

Withs adds multiple childs to the element. It simply calls With, for all elements in the slice.

type FileName 

type FileName string

FileName is a modifier that, when applied to File, defines the default value for the file-name element.

type FileNameAutoUpdate 

type FileNameAutoUpdate string

FileNameAutoUpdate is a modifier that, when applied to File, defines the default value for the file-name element, and adds the needed javascript event to update the file name.

type HTitle 

type HTitle string

HTitle, when provided to HTML, sets the page title

type ImgAlt 

type ImgAlt string

ImgAlt is a modifier that, when applied to ImageImg, adds an alt attribute.

type Language 

type Language string

Language, when provided to HTML, sets the page lang attribute

type MultiClass 

type MultiClass struct {
	Responsive []string // Classes that may be modified with one of the responsive functions
	Static     []string // Classes that will not be modified with responsive functions
}

MultiClass is an Element modifier to apply multiple HTML classes.

func (MultiClass) Desktop 

func (c MultiClass) Desktop() MultiClass

Desktop makes the class apply on desktop and larger screens (only for classes supporting responsiveness).

func (MultiClass) DesktopOnly 

func (c MultiClass) DesktopOnly() MultiClass

DesktopOnly makes the class apply on desktop screens only (only for classes supporting responsiveness).

func (MultiClass) FullHD 

func (c MultiClass) FullHD() MultiClass

FullHD makes the class apply on full hd screens only (only for classes supporting responsiveness).

func (MultiClass) Mobile 

func (c MultiClass) Mobile() MultiClass

Mobile makes the class apply on mobile and larger screens (only for classes supporting responsiveness).

func (MultiClass) Tablet 

func (c MultiClass) Tablet() MultiClass

Tablet makes the class apply on tablet and larger screens (only for classes supporting responsiveness).

func (MultiClass) TabletOnly 

func (c MultiClass) TabletOnly() MultiClass

TabletOnly makes the class apply on tablet screens only (only for classes supporting responsiveness).

func (MultiClass) Touch 

func (c MultiClass) Touch() MultiClass

Touch makes the class apply on touch screens (mobile and tablet) only (only for classes supporting responsiveness).

func (MultiClass) Widescreen 

func (c MultiClass) Widescreen() MultiClass

Widescreen makes the class apply on widescreen and larger screens (only for classes supporting responsiveness).

func (MultiClass) WidescreenOnly 

func (c MultiClass) WidescreenOnly() MultiClass

WidescreenOnly makes the class apply on widescreen screens only (only for classes supporting responsiveness).

type Name 

type Name string

type Size 

type Size int

type Spacing 

type Spacing string

Spacing is used for spacing sizes, used in Margin* and Padding*. 

const (
	Spacing0    Spacing = "0"
	Spacing1    Spacing = "1"
	Spacing2    Spacing = "2"
	Spacing3    Spacing = "3"
	Spacing4    Spacing = "4"
	Spacing5    Spacing = "5"
	Spacing6    Spacing = "6"
	SpacingAuto Spacing = "auto"
)

type Styles 

type Styles map[string]string

func Style 

func Style(propertiesValues ...string) Styles

Style applies a single style to the element

Source Files

View all Source files

Directories

Path Synopsis
cmd
components

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.