uikit

README

go-uikit is a package to be used with go-app to build progressive web apps (PWA) with, UIkit front-end framework, Go programming language and WebAssembly.

Components

• Accordion
• Alert
• Article
• Breadcrumb
• Button
• Card
• Container
• Grid
• Leader
• Lightbox
• Marker
• Section

Building Docs

Compile WASM

cd docs/
GOARCH=wasm GOOS=js go build -v -o ./web/app.wasm ./src

Compile Local server

go build -v -o go-uikit-serve ./src
./go-uikit-serve local

Documentation

Index

• func JSONString(v map[string]interface{}) (string, error)
• type UIAccordion
  • func Accordion() UIAccordion
• type UIAccordionItem
  • func AccordionItem() UIAccordionItem
• type UIAlert
  • func Alert() UIAlert
• type UIArticle
  • func Article() UIArticle
• type UIBreadcrumb
  • func Breadcrumb() UIBreadcrumb
• type UIButton
  • func Button() UIButton
• type UICard
  • func Card() UICard
• type UIContainer
  • func Container() UIContainer
• type UIGrid
  • func Grid() UIGrid
• type UILeader
  • func Leader() UILeader
• type UILightbox
  • func Lightbox() UILightbox
• type UIMarker
  • func Marker() UIMarker
• type UISection
  • func Section() UISection

Functions

func JSONString

func JSONString(v map[string]interface{}) (string, error)

JSONString encodes v and return v as string. If error return empty string and an error.

Types

type UIAccordion

type UIAccordion interface {
	app.UI

	// Class adds a CSS class to the accordion.
	Class(v string) UIAccordion

	// Content sets the main content.
	Content(elems ...app.UI) UIAccordion

	// Option sets a component option.
	Option(k string, v interface{}) UIAccordion
}

UIAccordion is a component that creates a list of items that can be shown individually by clicking an item's header.

func Accordion

func Accordion() UIAccordion

Accordion returns a accordion component.

type UIAccordionItem

type UIAccordionItem interface {
	app.UI

	// Class adds a CSS class to the section.
	Class(c string) UIAccordionItem

	// Title defines and styles the toggle for accordion item
	Title(v string) UIAccordionItem

	// Content sets the main content for accordion item.
	Content(elems ...app.UI) UIAccordionItem
}

UIAccordionItem is a component

func AccordionItem

func AccordionItem() UIAccordionItem

AccordionItem returns a UI Accordion Item

type UIAlert

type UIAlert interface {
	app.UI

	// Class adds a CSS class to the alert.
	Class(v string) UIAlert

	// Content sets the main content.
	Content(elems ...app.UI) UIAlert

	// Option sets a component option.
	Option(k string, v interface{}) UIAlert

	// Danger indicates an important or error message.
	Danger() UIAlert

	// Primary gives the message a prominent styling.
	Primary() UIAlert

	// Success indicates success or a positive message.
	Success() UIAlert

	// Warning indicates a message containing a warning.
	Warning() UIAlert
}

UIAlert is a component that displays success, warning and error messages

func Alert

func Alert() UIAlert

Alert returns a alert component.

type UIArticle

type UIArticle interface {
	app.UI

	// Class adds a CSS class to the article.
	Class(v string) UIArticle

	// Content sets the main content.
	Content(elems ...app.UI) UIArticle
}

UIArticle is a component that consists of the article itself, a title and meta data

func Article

func Article() UIArticle

Article returns a article component.

type UIBreadcrumb

type UIBreadcrumb interface {
	app.UI

	// Class adds a CSS class to the breadcrumb.
	Class(v string) UIBreadcrumb

	// Content sets the main content.
	Content(elems ...app.UI) UIBreadcrumb
}

UIBreadcrumb is a component that creates breadcrumbs to show users their location within a website

func Breadcrumb

func Breadcrumb() UIBreadcrumb

Breadcrumb returns a breadcrumb component.

type UIButton

type UIButton interface {
	app.UI

	// Class adds a CSS class to the button.
	Class(v string) UIButton

	// Content sets the main content.
	Content(elems ...app.UI) UIButton

	// Danger indicates a dangerous or negative action.
	Danger() UIButton

	// Default button style.
	Default() UIButton

	// FullWidth fills 100% of the available width.
	FullWidth() UIButton

	// Large makes a <button> look larger.
	Large() UIButton

	// Link makes a <button> look like an <a> element.
	Link() UIButton

	// Primary indicates the primary action.
	Primary() UIButton

	// Secondary indicates an important action.
	Secondary() UIButton

	// Small makes a <button> look smaller.
	Small() UIButton

	// Text applies an alternative, typographic style.
	Text() UIButton
}

UIButton is a component that creates nice looking buttons, which come in different styles

func Button

func Button() UIButton

Button returns a button component.

type UICard

type UICard interface {
	app.UI

	// Class adds a CSS class to the card.
	Class(v string) UICard

	// Content sets the main content.
	Content(elems ...app.UI) UICard

	// Default to create a visually styled box.
	Default() UICard

	// Hover to create a hover effect on the card.
	Hover() UICard

	// Large to apply a larger padding.
	Large() UICard

	// Primary to modify the card and emphasize it with a primary color.
	Primary() UICard

	// Secondary to modify the card and give it a secondary background color.
	Secondary() UICard

	// Small to apply a smaller padding.
	Small() UICard
}

UICard is a component that creates layout boxes with different styles

func Card

func Card() UICard

Card returns a card component.

type UIContainer

type UIContainer interface {
	app.UI

	// Class adds a CSS class to the container.
	Class(v string) UIContainer

	// Content sets the main content.
	Content(elems ...app.UI) UIContainer

	// Expand if you do not want to limit the container width but still want the dynamic horizontal padding.
	Expand() UIContainer

	// Large for a large container.
	Large() UIContainer

	// Small for a small container.
	Small() UIContainer

	// XLarge for a xlarge container.
	XLarge() UIContainer

	// XSmall for a xsmall container.
	XSmall() UIContainer
}

UIContainer is a component that allows you to align and center your page content

func Container

func Container() UIContainer

Container returns a container component.

type UIGrid

type UIGrid interface {
	app.UI

	// Class adds a CSS class to the grid.
	Class(v string) UIGrid

	// Content sets the main content.
	Content(elems ...app.UI) UIGrid

	// Option sets a component option.
	Option(k string, v interface{}) UIGrid

	// Collapse to remove the grid gap entirely.
	Collapse() UIGrid

	// Divider to separate grid cells with lines.
	Divider() UIGrid

	// Large to apply a large gap with breakpoints.
	Large() UIGrid

	// MatchHeight to match the height of the direct child of each cell.
	MatchHeight() UIGrid

	// Medium to apply a medium gap like the default one, but without a breakpoint.
	Medium() UIGrid

	// Small to apply a small gap.
	Small() UIGrid
}

UIGrid is a component that creates a fully responsive, fluid and nestable grid layout

func Grid

func Grid() UIGrid

Grid returns a grid component.

type UILeader

type UILeader interface {
	app.UI

	// Class adds a CSS class to the leader.
	Class(v string) UILeader

	// Content sets the main content.
	Content(elems ...app.UI) UILeader

	// Option sets a component option.
	Option(k string, v interface{}) UILeader
}

UILeader is a component that creates dot leaders for pricing menus or tables of contents

func Leader

func Leader() UILeader

Leader returns a leader component.

type UILightbox

type UILightbox interface {
	app.UI

	// Class adds a CSS class to the lightbox.
	Class(v string) UILightbox

	// Content sets the main content.
	Content(elems ...app.UI) UILightbox

	// Option sets a component option.
	Option(k string, v interface{}) UILightbox
}

UILightbox is a component that creates a responsive lightbox gallery with images and videos

func Lightbox

func Lightbox() UILightbox

Lightbox returns a lightbox component.

type UIMarker

type UIMarker interface {
	app.UI

	// Class adds a CSS class to the marker.
	Class(v string) UIMarker

	// Content sets the main content.
	Content(elems ...app.UI) UIMarker

	// Option sets a component option.
	Option(k string, v interface{}) UIMarker
}

UIMarker is a component that creates a marker icon that can be displayed on top of images

func Marker

func Marker() UIMarker

Marker returns a marker component.

type UISection

type UISection interface {
	app.UI

	// Class adds a CSS class to the section.
	Class(v string) UISection

	// Content sets the main content.
	Content(elems ...app.UI) UISection

	// Default adds the default background color of your site.
	Default() UISection

	// Large to increase a section's padding.
	Large() UISection

	// Muted adds a muted background color.
	Muted() UISection

	// Primary adds a primary background color.
	Primary() UISection

	// RemoveVerticalPadding removes top and bottom padding from an element.
	RemoveVerticalPadding() UISection

	// Secondary adds a secondary background color.
	Secondary() UISection

	// Small to decrease a section's padding.
	Small() UISection

	// XLarge to further increase a section's padding.
	XLarge() UISection

	// XSmall to decrease a section's padding to a minimum.
	XSmall() UISection
}

UISection is a component that creates horizontal layout sections with different background colors and styles

func Section

func Section() UISection

Section returns a section component.