style

package
v0.4.3 Latest Latest
Warning

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

 Go to latest Published: Jul 29, 2026 License: MIT Imports: 4 Imported by: 0

Documentation

Overview

Package style is the stylesheet engine for visual components.

It is excluded from WebAssembly by `//go:build !wasm` so it can never reach the client binary.

Index

Examples

Constants

This section is empty.

Variables

This section is empty.

Functions

This section is empty.

Types

type Aspect added in v0.4.0 

type Aspect uint8

Aspect is the aspect ratio for MediaBox containers. 

const (
	AspectSquare Aspect = iota
	Aspect3x2
	Aspect4x3
	Aspect16x9
)

type ColumnWidth added in v0.4.0 

type ColumnWidth uint8

ColumnWidth represents minimum column width for grids. 

const (
	ColumnNarrow ColumnWidth = iota
	ColumnMedium
	ColumnWide
)

type Elevation 

type Elevation uint8

Elevation is the shadow elevation scale. 

const (
	Flat Elevation = iota
	Raised
	Floating
	Popover
)

type Motion added in v0.3.1 

type Motion uint8

Motion is the transition scale. Duration is owned by CSS; here we only select the level. 

const (
	MotionNone Motion = iota // no transition
	MotionFast               // immediate highlight: hover, focus
	MotionBase               // state change
	MotionSlow               // panel/overlay transition
)

type Option added in v0.4.0 

type Option func(*rule)

Option is a visual option that configures a rule.

func Animate added in v0.3.1 

func Animate(m Motion) Option

Animate applies a transition according to the motion scale.

func As added in v0.4.0 

func As(s Surface) Option

As sets the surface decision (background, text, border, and radius default).

func Backdrop added in v0.3.0 

func Backdrop(s Scope) Option

Backdrop removes the element from the normal flow and stretches it over its Scope.

Example 
package main

import (
	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	_ = style.For(btn).
		Part("overlay", style.Backdrop(style.Viewport), style.Veil())
}

func Center 

func Center(max ...Size) Option

Center defines a centered column with an optional maximum size (defaults to Readable).

func Cover 

func Cover() Option

Cover fills the viewport height and stacks its children vertically. It is the outermost frame of an application shell: use KeepSize() on the children that must not shrink (a header) and Fill() on the one that takes the remaining height. Do not nest one Cover inside another.

func Drawer added in v0.4.3 

func Drawer(side Side, size Size) Option

Drawer anchors the element to one inline edge of the viewport, full height, at the widget kind's stacking layer. It is the slide-in panel of a mobile navigation; pair it with RevealedBy(widget.Open) to control visibility and with a sibling Backdrop(Viewport)+Veil() for the dimmed page behind it.

Drawer sets the element's width. Do NOT also pass Width() — Validate rejects it.

func EdgeToEdge added in v0.4.0 

func EdgeToEdge() Option

EdgeToEdge has no border radius or margin: flush against parent container.

func Fill 

func Fill() Option

Fill takes up the entire available height.

func FillCentered added in v0.4.0 

func FillCentered() Option

FillCentered fills the container with a centered child.

func FontSize added in v0.4.0 

func FontSize(ts TextSize) Option

FontSize sets the text size.

func FontWeight 

func FontWeight(w Weight) Option

FontWeight sets the font weight.

func Grid 

func Grid(min ColumnWidth, gap Space) Option

Grid defines auto-fit + minmax without a fixed number of columns.

func HideOverflow added in v0.4.0 

func HideOverflow() Option

HideOverflow clips descendants (overflow: hidden).

func Interactive added in v0.4.0 

func Interactive(s Surface) Option

Interactive applies s and derives its hover, focus, and press treatments.

Example 
package main

import (
	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	_ = style.For(btn).
		Root(style.Interactive(style.Primary))
}

func KeepSize added in v0.4.0 

func KeepSize() Option

KeepSize does NOT reflow: maintains its size under any width.

func MediaBox added in v0.4.0 

func MediaBox(a Aspect) Option

MediaBox defines a box of fixed aspect ratio.

func Pad 

func Pad(s Space) Option

Pad applies internal padding according to the space scale.

func Raise 

func Raise(e Elevation) Option

Raise applies shadow elevation according to the elevation scale.

func RevealedBy added in v0.4.0 

func RevealedBy(st widget.State) Option

RevealedBy binds hiding/showing the element to a widget State.

Example 
package main

import (
	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	_ = style.For(btn).
		Part("menu", style.RevealedBy(widget.Open))
}

func Round 

func Round(rad Radius) Option

Round applies border radius according to the radius scale.

func Row 

func Row(gap Space) Option

Row defines a horizontal flow that wraps when it does not fit.

func Scroll added in v0.4.0 

func Scroll() Option

Scroll overflows internally instead of growing. Implies Fill().

func ScrollRow added in v0.4.0 

func ScrollRow(gap Space) Option

ScrollRow defines a horizontal scrolling strip with scroll-snap. 

func Sidebar(side Side, width RailWidth, gap Space) Option

Sidebar places a fixed-width rail beside a fluid content area. The rail keeps its width; the content takes everything else. Below the point where the content can no longer hold its minimum width the two reflow into a single column, with no media query involved.

The container MUST have exactly two element children. Which one is the rail is decided by side, not by DOM order: SideEnd makes the LAST child the rail.

func Split 

func Split(ratio SplitRatio, gap Space) Option

Split defines two panels that stack below their own width.

Example 
package main

import (
	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	_ = style.For(btn).
		Root(style.Split(style.SplitTwoThirds, style.Space3))
}

func Stack 

func Stack(gap Space) Option

Stack defines a vertical rhythm with children at full width.

Example 
package main

import (
	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	_ = style.For(btn).
		Root(style.Stack(style.Space4))
}

func Veil added in v0.4.0 

func Veil() Option

Veil fills the element with a translucent wash overlaying the surface. Only makes sense alongside Backdrop.

func Width 

func Width(s Size) Option

Width applies the relative width (Size) to the rule.

type Radius 

type Radius uint8

Radius is the border radius scale. 

const (
	RadiusNone Radius = iota
	RadiusSm
	RadiusMd
	RadiusLg
	RadiusFull
)

type RailWidth added in v0.4.3 

type RailWidth uint8

RailWidth is the closed scale for a Sidebar's fixed column. 

const (
	RailNarrow RailWidth = iota // icon only
	RailWide                    // icon plus label
)

type Scope added in v0.3.0 

type Scope uint8

Scope says what an overlay dimensions against. 

const (
	// Parent covers the nearest positioned ancestor (position: absolute).
	Parent Scope = iota
	// Viewport covers the entire window (position: fixed).
	Viewport
)

type Sheet 

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

Sheet represents a scoped stylesheet for a widget.

func For added in v0.4.0 

func For(w widget.Widget) *Sheet

For opens the styling block for a widget.

Example 
package main

import (
	"fmt"

	"github.com/tinywasm/widget"
	"github.com/tinywasm/widget/style"
)

type myButton struct{}

func (b *myButton) WidgetName() widget.Name { return widget.Name("btn") }
func (b *myButton) WidgetKind() widget.Kind { return widget.Region }

func main() {
	btn := &myButton{}
	sheet := style.For(btn).
		Root(style.As(style.Primary))

	fmt.Println(sheet.Parts())
}

Output:
[]

func (*Sheet) Cue 

func (s *Sheet) Cue(c widget.Cue, p widget.Part, opts ...Option) *Sheet

Cue defines the style for a part (or Root if p is "") when the browser has a cue.

func (*Sheet) On added in v0.4.3 

func (s *Sheet) On(d css.Device, p widget.Part, opts ...Option) *Sheet

On defines the style for a part (or Root if p is "") only on the given viewport class. It is the single sanctioned way to vary a widget by device: the query strings live in tinywasm/css and are exhaustively tested there.

Reach for a flow primitive first — Split, Grid and Sidebar already reflow on their own. Use On only when the ARRANGEMENT itself differs, e.g. a nav rail that becomes a drawer.

func (*Sheet) OnlyOn added in v0.4.3 

func (s *Sheet) OnlyOn(d css.Device, p widget.Part, opts ...Option) *Sheet

OnlyOn declares a part that exists on one viewport class and nowhere else: it is display:none by default and takes the given options only on d.

Use it for chrome that is genuinely device-specific — a hamburger button, a drawer's backdrop. If the element merely CHANGES between devices rather than disappearing, declare it with Part() and refine it with On().

func (*Sheet) Part 

func (s *Sheet) Part(p widget.Part, opts ...Option) *Sheet

Part defines the style for an anatomical part of the widget.

func (*Sheet) Parts added in v0.4.0 

func (s *Sheet) Parts() []widget.Part

func (*Sheet) Root 

func (s *Sheet) Root(opts ...Option) *Sheet

Root defines the style for the root element of the widget.

func (*Sheet) StateAttrs added in v0.4.3 

func (s *Sheet) StateAttrs() []fmt.KeyValue

func (*Sheet) Stylesheet 

func (s *Sheet) Stylesheet() *css.Stylesheet

func (*Sheet) Validate added in v0.4.0 

func (s *Sheet) Validate() []error

func (*Sheet) When 

func (s *Sheet) When(st widget.State, p widget.Part, opts ...Option) *Sheet

When defines the style for a part (or Root if p is "") when the widget has a specific state.

type Side added in v0.4.3 

type Side uint8

Side names which edge a Sidebar's rail or a Drawer's panel is anchored to. Logical, not physical: it follows writing direction. 

const (
	SideStart Side = iota // inline-start — left in LTR
	SideEnd               // inline-end   — right in LTR
)

type Size 

type Size uint8

Size is the relative size measurement. 

const (
	Content  Size = iota // adjusts to its content
	Readable             // readable line length
	Third
	Half
	TwoThirds
	Full // 100% of the container
)

type Space 

type Space uint8

Space is the spacing scale: 8 steps mirroring --space-N. 

const (
	SpaceNone Space = iota
	Space1
	Space2
	Space3
	Space4
	Space6
	Space8
	Space12
)

type SplitRatio added in v0.4.0 

type SplitRatio uint8

SplitRatio is the flex-grow ratio for Split partitions. 

const (
	SplitHalf SplitRatio = iota
	SplitTwoThirds
	SplitThreeQuarters
)

type Surface 

type Surface uint8

Surface is a complete visual decision: background, text, and border resolved together. 

const (
	Page Surface = iota
	Panel
	Inset
	Primary
	Secondary
	Highlight
	Success
	Danger
	Subtle
	Inactive
)

func (Surface) String added in v0.4.0 

func (s Surface) String() string

type TextSize 

type TextSize uint8

TextSize is the typography size scale. 

const (
	TextXs TextSize = iota
	TextSm
	TextBase
	TextLg
	TextXl
	Text2xl
)

type Weight 

type Weight uint8

Weight is the font weight scale. 

const (
	WeightRegular Weight = iota
	WeightMedium
	WeightBold
)

Source Files

View all Source files

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.