bulma

package module
v0.1.6 Latest Latest
Warning

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

 Go to latest Published: Nov 20, 2024 License: MIT Imports: 4 Imported by: 0

README

templ-bulma

Status: Usable

Why

I wanted add building blocks for templ so I had to look at less html and more Go code. Overall I found it to be helpful because everything now populates with intellasence. With the naming pattern it should be easy to find the related components and build on top of it.

How to use

go get github.com/jtom38/templ-bulma

Usage

Any of the functions that are New* support having a templ child item.

HTMX

This has some HTMX features and I expect to add more.

All Htmx enabled functions are tagged with Hx in the name. If you find missing Htmx features please feel free to PR them. I will add more as I use them in my own project.

Closing

If you find this helpful, leave a ⭐️ and if you find any issues or improvement, please create a PR.

Documentation

Overview

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

templ: version: v0.2.793

Index

Constants

View Source 
const (
	InputTypeText        = "text"
	InputTypePassword    = "password"
	InputTypeEmail       = "email"
	InputTypePhoneNumber = "tel"
)
View Source 
const (
	HxTriggerClick      = "clicked"
	HxTriggerMouseEnter = "mouseenter"

	HxSwapInnerHtml = "innerHtml"
	HxSwapOuterHtml = "outerHtml"
	HxSwapDefault   = HxSwapInnerHtml
	HxSwapBlank     = ""
)
View Source 
const (
	AlignmentLeft     = ""
	AlignmentCentered = "is-centered"
	AlignmentRight    = "is-right"

	BreakpointDefault       = ""
	BreakpointWidescreen    = "is-widescreen"
	BreakpointFullHd        = "is-fullhd"
	BreakpointMaxDesktop    = "is-max-desktop"
	BreakpointMaxWidescreen = "is-max-widescreen"

	ColorDefault = ""
	ColorPrimary = "is-primary"
	ColorInfo    = "is-info"
	ColorLink    = "is-link"
	ColorWarning = "is-warning"
	ColorSuccess = "is-success"
	ColorDanger  = "is-danger"

	ColumnsVCentered = "is-vcentered"
	ColumnsMultiline = "is-multiline"
	ColumnsMobile    = "is-mobile"
	ColumnsCentered  = "is-centered"
	ColumnsNarrow    = "is-narrow"
	ColumnsGapless   = "is-gapless"

	ColumnSizeDefault         = ""
	ColumnSizeIsThreeQuarters = "is-three-quarters"
	ColumnSizeIsTwoThirds     = "is-two-thirds"
	ColumnSizeIsHalf          = "is-half"
	ColumnSizeIsOneThird      = "is-one-third"
	ColumnSizeIsOneQuarter    = "is-one-quarter"
	ColumnSizeIsFull          = "is-full"
	ColumnOffsetDefault       = ""
	ColumnOffsetOneQuarter    = "is-offset-one-quarter"
	ColumnOffsetOneFifth      = "is-offset-one-fifth"

	ImageIs16x16   = "is-16x16"
	ImageIs24x24   = "is-24x24"
	ImageIs32x32   = "is-32x32"
	ImageIs64x64   = "is-64x64"
	ImageIs96x96   = "is-96x96"
	ImageIs128x128 = "is-128x128"
	ImageIs4by3    = "is-4by3"

	SeparatorDefault  = ""
	SeparatorArrow    = "has-arrow-separator"
	SeparatorBullet   = "has-bullet-separator"
	SeparatorDot      = "has-dot-separator"
	SeparatorSucceeds = "has-succeeds-separator"

	SizeDefault = ""
	SizeSmall   = "is-small"
	SizeNormal  = "is-normal"
	SizeMedium  = "is-medium"
	SizeLarge   = "is-large"

	StyleDefault       = ""
	StyleBoxed         = "is-boxed"
	StyleToggle        = "is-toggle"
	StyleToggleRounded = "is-toggle is-toggle-rounded"

	TableDefault   = ""
	TableBordered  = "is-bordered"
	TableStriped   = "is-striped"
	TableNarrow    = "is-narrow"
	TableHoverable = "is-hoverable"
	TableFullWidth = "is-fullwidth"
)

Variables

This section is empty.

Functions 

func BreadcrumbActive(url, text string) templ.Component

https://bulma.io/documentation/components/breadcrumb/ 

func BreadcrumbActiveIcon(url, text, faIcon string) templ.Component

https://bulma.io/documentation/components/breadcrumb/ 

func BreadcrumbPrevious(url, text string) templ.Component
func BreadcrumbPreviousIcon(url, text, faIcon string) templ.Component

https://bulma.io/documentation/components/breadcrumb/ 

func ButtonLink(url, text, color, size string) templ.Component

func ButtonNewTab 

func ButtonNewTab(url, text, color, size string) templ.Component

Helper Button that will add a ahref link that opens a new tab.

func CardFooterItem 

func CardFooterItem(url, text string) templ.Component

func CardHeaderIcon 

func CardHeaderIcon(title string) templ.Component

This is used to create a header within a card. Use this version if you want to have an icon added.

func CardImage 

func CardImage(imageSize, src, alt string) templ.Component

Creates a image card container. Accepts children

func Delete 

func Delete(size string) templ.Component

https://bulma.io/documentation/elements/delete/ 

func DropdownMenuLink(url, text string) templ.Component
func DropdownMenuSeperator() templ.Component
func DropdownTrigger(text, controls string) templ.Component

Controls needs to match up with the same controls in the DropdownMenu() so it works together

https://bulma.io/documentation/components/dropdown/

func ExampleBreadcrumb 

func ExampleBreadcrumb() templ.Component

func ExampleCard 

func ExampleCard() templ.Component

func ExampleDropdown 

func ExampleDropdown() templ.Component

func ExampleMenu 

func ExampleMenu() templ.Component

func FormCheckbox 

func FormCheckbox(text, id string) templ.Component

func FormLabel 

func FormLabel(text string) templ.Component

This will create a small bit of text to add context to the form.

func FormLabelSelectOne 

func FormLabelSelectOne(label, id string) templ.Component

This is a helper that creates the following object for you.

Accepts Children 

 @bulma.NewFormField() {
	@bulma.FormLabel("Type")
	@bulma.FormControl() {
		@Newbulma.FormSelectOne("type", false) {
			@bulma.FormSelectOneItem("Playlist")
			@bulma.FormSelectOneItem("Artist")
			@bulma.FormSelectOneItem("Album")
		}
	}
}

func FormLabelTextInput 

func FormLabelTextInput(id, label, placeholder string) templ.Component

This is a helper to create the following object for you. 

@bulma.NewFormField() {
	@bulma.FormLabel(label)
	@bulma.NewFormControl() {
		@bulma.FormTextInput(id, bulma.InputTypeText, placeholder)
	}
}

func FormSelectManyItem 

func FormSelectManyItem(name string) templ.Component

func FormSelectOneColor 

func FormSelectOneColor(color, id string, isRound bool) templ.Component

func FormSelectOneItem 

func FormSelectOneItem(name string) templ.Component

func FormSubmit 

func FormSubmit(text, color string) templ.Component

func FormTextArea 

func FormTextArea(id, placeholder, color string) templ.Component

func FormTextInput 

func FormTextInput(id, fieldType, placeholder, color string) templ.Component

func FormTextInputWithValue 

func FormTextInputWithValue(id, fieldType, value, color string, readonly bool) templ.Component

Creates a text form that populates a default value. This one gives you the option to mark the field as readonly so users are unable to change the value.

func H1 

func H1(message string, isSubtitle bool) templ.Component

https://bulma.io/documentation/elements/title/

func H2 

func H2(message string, isSubtitle bool) templ.Component

https://bulma.io/documentation/elements/title/

func H3 

func H3(message string, isSubtitle bool) templ.Component

https://bulma.io/documentation/elements/title/

func H4 

func H4(message string, isSubtitle bool) templ.Component

https://bulma.io/documentation/elements/title/

func H5 

func H5(message string, isSubtitle bool) templ.Component

https://bulma.io/documentation/elements/title/

func Hero 

func Hero(title, subtitle, size, color string) templ.Component
func HxButtonLink(color, size, text string, hx HtmxProperties) templ.Component
func HxDropdownMenuLink(text string, hx HtmxProperties) templ.Component
func HxLink(text string, hx HtmxProperties) templ.Component

func HxNavbarItem added in v0.1.2 

func HxNavbarItem(text string, hx HtmxProperties) templ.Component
func HxTabLink(text string, isActive bool, hx HtmxProperties) templ.Component

func HxTabLinkIcon added in v0.1.5 

func HxTabLinkIcon(text, fontAwesomeIcon string, isActive bool, hx HtmxProperties) templ.Component

func Icon 

func Icon(fontAwesomeIcon string) templ.Component

https://bulma.io/documentation/elements/icon/

https://fontawesome.com/icons

func IconText 

func IconText(fontAwesomeIcon, text string) templ.Component

https://bulma.io/documentation/elements/icon/

https://fontawesome.com/icons

func ImageSrc 

func ImageSrc(image, src, alt string) templ.Component

Creates an image object that defines the image under it. https://bulma.io/documentation/elements/image/

func MediaImage 

func MediaImage(image, url string, isLeft, isRight bool) templ.Component
func MenuLabel(text string) templ.Component
func MenuListItem(url, title string) templ.Component

func MessageWithHeader 

func MessageWithHeader(text string) templ.Component

This is an optional item on the Message 

func NavbarBrandBurger(dataTarget string) templ.Component
func NavbarExample() templ.Component

This is an example on how to setup a Navbar. Don't use this in your project. 

func NavbarItem(url, text string) templ.Component
func NavbarItemChildren(url string) templ.Component

This is ideal if you want to use something like svg 

func NavbarItemDropdownDivider() templ.Component

func NewBlock added in v0.1.0 

func NewBlock() templ.Component

Bulma’s most basic spacer block. Accepts Children

https://bulma.io/documentation/elements/block/

func NewBox added in v0.1.0 

func NewBox() templ.Component

A white box to contain other elements Accepts Children

https://bulma.io/documentation/elements/box/

func NewBreadcrumb 

func NewBreadcrumb(alignment, separator, size string) templ.Component

#region Breadcrumb https://bulma.io/documentation/components/breadcrumb/

func NewButton added in v0.1.0 

func NewButton(color, size string) templ.Component

This creates a button that accepts children under it. Accepts Children

https://bulma.io/documentation/elements/button/

func NewCard 

func NewCard() templ.Component

Creates a card container. Accepts children

https://bulma.io/documentation/components/card/

func NewCardContent added in v0.1.0 

func NewCardContent() templ.Component

a multi-purpose container for any other element

Accepts Children

func NewCardFooter added in v0.1.0 

func NewCardFooter() templ.Component

a horizontal list of controls

Accepts Children

func NewCardHeader added in v0.1.0 

func NewCardHeader(title string) templ.Component

Creates a basic header for a Card that just has text

func NewColumn added in v0.1.0 

func NewColumn(columnSize ...string) templ.Component

Creates a new column that can accept multiple sizes. You can pass in multiple sizes, but start with one and add more if you need them.

https://bulma.io/documentation/columns/responsiveness/

func NewColumns 

func NewColumns(columns ...string) templ.Component

Creates a new Columns container that accepts multiple column objects. This accepts multiple Columns... values.

https://bulma.io/documentation/columns/options/

func NewContainer added in v0.1.0 

func NewContainer(breakpoint string) templ.Component

func NewContent added in v0.1.0 

func NewContent() templ.Component

https://bulma.io/documentation/elements/content/

func NewDropdown 

func NewDropdown() templ.Component

Creates a dropdown menu.

https://bulma.io/documentation/components/dropdown/

func NewDropdownMenu added in v0.1.0 

func NewDropdownMenu(controls string) templ.Component

Accepts Children

https://bulma.io/documentation/components/dropdown/

func NewFlexGrid added in v0.1.0 

func NewFlexGrid(useAutoCount bool) templ.Component

func NewForm 

func NewForm(url string) templ.Component

Creates a new standard HTML form.

func NewFormControl added in v0.1.0 

func NewFormControl() templ.Component

Div container to add a input field to.

func NewFormField added in v0.1.0 

func NewFormField() templ.Component

This creates a field that you can add a Label, Control or Input object.

func NewFormSelectMany added in v0.1.0 

func NewFormSelectMany(howManySelectable int, id string, isRound bool) templ.Component

func NewFormSelectManyColor added in v0.1.0 

func NewFormSelectManyColor(howManySelectable int, color, id string, isRound bool) templ.Component

func NewFormSelectOne added in v0.1.0 

func NewFormSelectOne(id string, isRound bool) templ.Component

func NewGrid added in v0.1.0 

func NewGrid() templ.Component

func NewGridCell added in v0.1.0 

func NewGridCell() templ.Component

func NewHxContainer added in v0.1.2 

func NewHxContainer(breakpoint, id string, hx HtmxProperties) templ.Component

func NewHxForm added in v0.1.1 

func NewHxForm(hxpostUrl string) templ.Component

Creates a new HTML form that will be processed via HTMX.

func NewHxTableBody added in v0.1.6 

func NewHxTableBody(hx HtmxProperties) templ.Component

func NewImage added in v0.1.0 

func NewImage(image string) templ.Component

Creates a image wrapper. This accepts children. Use html.Img() to load a image as a child

https://bulma.io/documentation/elements/image/

func NewLevel added in v0.1.0 

func NewLevel(isMobile bool) templ.Component

A multi-purpose horizontal level, which can contain almost any other element

Accepts Children

https://bulma.io/documentation/layout/level/

func NewLevelItem added in v0.1.0 

func NewLevelItem(hasTextCentered bool) templ.Component

Creates a element within the Level object

func NewLevelLeft added in v0.1.0 

func NewLevelLeft() templ.Component

Level container that aligns to the left

Accepts Children

func NewLevelRight added in v0.1.0 

func NewLevelRight() templ.Component

Level container that alights to the right

Accepts Children

func NewMedia added in v0.1.0 

func NewMedia() templ.Component

Creats a new base object of a Media object

https://bulma.io/documentation/layout/media-object/

func NewMediaContent added in v0.1.0 

func NewMediaContent() templ.Component

func NewMediaLeft added in v0.1.0 

func NewMediaLeft() templ.Component

func NewMediaRight added in v0.1.0 

func NewMediaRight() templ.Component

func NewMenu 

func NewMenu() templ.Component

Accepts Children

https://bulma.io/documentation/components/menu/

func NewMenuList added in v0.1.0 

func NewMenuList() templ.Component

func NewMessage 

func NewMessage(size, color string) templ.Component

Colored message blocks, to emphasize part of your page.

Accepts Children

https://bulma.io/documentation/components/message/

func NewMessageBody added in v0.1.0 

func NewMessageBody() templ.Component

Accepts Children

Pass in the text with some basic html tags only. Should support @bulma.Content() but its not validated at this time.

func NewModel 

func NewModel() templ.Component

Creates a new model object. To use this correctly see bulma.RequiredModelScript()

https://bulma.io/documentation/components/modal/

func NewModelContent added in v0.1.0 

func NewModelContent() templ.Component

Accepts Children

You can use any bulma object within a model

func NewNavbar 

func NewNavbar() templ.Component

#region Navbar Accepts Children

https://bulma.io/documentation/components/navbar/

func NewNavbarBrand added in v0.1.0 

func NewNavbarBrand() templ.Component

On the left side, always visible, which usually contains the logo and optionally some links or icons

Accepts Children

func NewNavbarEnd added in v0.1.5 

func NewNavbarEnd() templ.Component

func NewNavbarItemDropdown added in v0.1.0 

func NewNavbarItemDropdown(text string) templ.Component

func NewNavbarMenu added in v0.1.0 

func NewNavbarMenu(dataTarget string) templ.Component

func NewNavbarStart added in v0.1.0 

func NewNavbarStart() templ.Component

func NewPagination 

func NewPagination() templ.Component

https://bulma.io/documentation/components/pagination/

func NewPaginationList added in v0.1.0 

func NewPaginationList() templ.Component

func NewPanel 

func NewPanel(color string) templ.Component

#region Panel

func NewPanelTabs added in v0.1.0 

func NewPanelTabs() templ.Component

Accepts Children

func NewSection added in v0.1.0 

func NewSection(size string) templ.Component

Creates a <section> object thats good to break up a page of content.

Accepts Children

https://bulma.io/documentation/layout/section/

func NewTab 

func NewTab(alignment, size, style string, isFullWidth bool) templ.Component

https://bulma.io/documentation/components/tabs/

func NewTable added in v0.1.0 

func NewTable(table ...string) templ.Component

Creates a <table> that accepts children

https://bulma.io/documentation/elements/table/

func NewTableDataChildren added in v0.1.0 

func NewTableDataChildren() templ.Component

Creates a <td> that accepts children.

func NewTableHeader added in v0.1.0 

func NewTableHeader() templ.Component

Creates a <thead> that accepts children.

func NewTableRow added in v0.1.0 

func NewTableRow() templ.Component

Creates a <tf> that accepts children.

func Notification 

func Notification(message, color string) templ.Component

https://bulma.io/documentation/elements/notification/

func PaginationActive 

func PaginationActive(text, ariaLabel string) templ.Component

func PaginationEllispsis 

func PaginationEllispsis() templ.Component

func PaginationExample 

func PaginationExample() templ.Component

func PaginationListItem 

func PaginationListItem(url, text, ariaLabel string) templ.Component

func PaginationNext 

func PaginationNext(url, text string) templ.Component

func PaginationPrevious 

func PaginationPrevious(url, text string) templ.Component

func PanelBlock 

func PanelBlock(url, text, faIcon string, isActive bool) templ.Component

Supports contain other elements, like control input, button, panel-icon

func PanelHeader 

func PanelHeader(text string) templ.Component

func PanelHeaderIcon 

func PanelHeaderIcon(text, faIcon string) templ.Component

func PanelTabItem 

func PanelTabItem(url, text string) templ.Component

func PanelTabItemActive 

func PanelTabItemActive(url, text string) templ.Component

func ProgressBar 

func ProgressBar(color string, value, max int) templ.Component

https://bulma.io/documentation/elements/progress/

func RequiredModelScript 

func RequiredModelScript() templ.Component

This is required for models to work correctly. This needs to be placed at the end of your body tag.

https://bulma.io/documentation/components/modal/#javascript-implementation-example

func RequiredNavbarToggleScript added in v0.1.0 

func RequiredNavbarToggleScript() templ.Component

This script will toggle the navbar on mobile. This needs to be placed at the end of your body tag.

https://bulma.io/documentation/components/navbar/#navbar-menu

func Subitle 

func Subitle(message string) templ.Component

https://bulma.io/documentation/elements/title/ 

func TabLink(url, text, fontAwesomeIcon string, isActive bool) templ.Component

func TabLinkIcon 

func TabLinkIcon(url, text, fontAwesomeIcon string, isActive bool) templ.Component

func TableData 

func TableData(value string) templ.Component

func TableHeaderData 

func TableHeaderData(value string) templ.Component

Creates a <th> and writes the given value

func TableHeaderDataToolTip 

func TableHeaderDataToolTip(value, tooltip string) templ.Component

Creates a <th> that allows you to also add a tooltip value

func TableHeaderValues added in v0.1.2 

func TableHeaderValues(values ...string) templ.Component

Helper component that will create multiple Table Header items for you with just defining an slice

func Tag 

func Tag(message, color, size string) templ.Component

https://bulma.io/documentation/elements/tag/

func Title 

func Title(message string) templ.Component

https://bulma.io/documentation/elements/title/

func UseBulmaCdn 

func UseBulmaCdn() templ.Component

func UseThemeCatppuccinMocha added in v0.1.6 

func UseThemeCatppuccinMocha() templ.Component

Enables the page to use a different color palet based on the Catppuccin Mocha values.

Add @bulma.UseThemeCatppuccinMocha() into your header. You should be able to add this to any element but it works best as a global theme set in your html tag.

<html lang="en" class="theme-catppuccin-mocha">

Types

type HtmxProperties added in v0.1.2 

type HtmxProperties struct {
	// The hx-get attribute will cause an element to issue a GET to the specified URL and swap the HTML into the DOM using a swap strategy
	//
	// https://htmx.org/attributes/hx-get/
	HxGet string

	HxPost    string
	HxTrigger string
	HxTarget  string
	HxSwap    string

	// The hx-boost attribute allows you to “boost” normal anchors and form tags to use AJAX instead
	//
	// https://htmx.org/attributes/hx-boost/
	HxBoost bool

	// The hx-push-url attribute allows you to push a URL into the browser location history.
	//
	// https://htmx.org/attributes/hx-push-url/
	HxPushUrl bool

	// The hx-confirm attribute allows you to confirm an action before issuing a request.
	// This can be useful in cases where the action is destructive and you want to ensure that the user really wants to do it.
	//
	//https://htmx.org/attributes/hx-confirm/
	HxConfirm string
}

Source Files

View all Source files

Directories

Path Synopsis
templ: version: v0.2.793
 templ: version: v0.2.793
templ: version: v0.2.793
 templ: version: v0.2.793
htmx
v1
templ: version: v0.2.793
 templ: version: v0.2.793

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.