Documentation

Overview

Package material implements the Material design.

To maximize reusability and visual flexibility, user interface controls are split into two parts: the stateful widget and the stateless drawing of it.

For example, widget.Clickable encapsulates the state and event handling of all clickable areas, while the Theme is responsible to draw a specific area, for example a button.

This snippet defines a button that prints a message when clicked:

var gtx layout.Context
button := new(widget.Clickable)

for button.Clicked(gtx) {
    fmt.Println("Clicked!")
}

Use a Theme to draw the button:

theme := material.NewTheme(...)

material.Button(theme, "Click me!").Layout(gtx, button)

Customization

Quite often, a program needs to customize the theme-provided defaults. Several options are available, depending on the nature of the change.

Mandatory parameters: Some parameters are not part of the widget state but have no obvious default. In the program above, the button text is a parameter to the Theme.Button method.

Theme-global parameters: For changing the look of all widgets drawn with a particular theme, adjust the `Theme` fields:

theme.Color.Primary = color.NRGBA{...}

Widget-local parameters: For changing the look of a particular widget, adjust the widget specific theme object:

btn := material.Button(theme, "Click me!")
btn.Font.Style = text.Italic
btn.Layout(gtx, button)

Widget variants: A widget can have several distinct representations even though the underlying state is the same. A widget.Clickable can be drawn as a round icon button:

icon := material.NewIcon(...)

material.IconButton(theme, icon).Layout(gtx, button)

Specialized widgets: Theme both define a generic Label method that takes a text size, and specialized methods for standard text sizes such as Theme.H1 and Theme.Body2.

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Clickable

func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) layout.Dimensions

Clickable lays out a rectangular clickable widget without further decoration.

Types

type ButtonLayoutStyle

type ButtonLayoutStyle struct {
	Background   color.NRGBA
	CornerRadius unit.Value
	Button       *widget.Clickable
}

func ButtonLayout

func ButtonLayout(th *Theme, button *widget.Clickable) ButtonLayoutStyle

func (ButtonLayoutStyle) Layout

type ButtonStyle

type ButtonStyle struct {
	Text string
	// Color is the text color.
	Color        color.NRGBA
	Font         text.Font
	TextSize     unit.Value
	Background   color.NRGBA
	CornerRadius unit.Value
	Inset        layout.Inset
	Button       *widget.Clickable
	// contains filtered or unexported fields
}

func Button

func Button(th *Theme, button *widget.Clickable, txt string) ButtonStyle

func (ButtonStyle) Layout

func (b ButtonStyle) Layout(gtx layout.Context) layout.Dimensions

type CheckBoxStyle

type CheckBoxStyle struct {
	CheckBox *widget.Bool
	// contains filtered or unexported fields
}

func CheckBox

func CheckBox(th *Theme, checkBox *widget.Bool, label string) CheckBoxStyle

func (CheckBoxStyle) Layout

Layout updates the checkBox and displays it.

type EditorStyle

type EditorStyle struct {
	Font     text.Font
	TextSize unit.Value
	// Color is the text color.
	Color color.NRGBA
	// Hint contains the text displayed when the editor is empty.
	Hint string
	// HintColor is the color of hint text.
	HintColor color.NRGBA
	// SelectionColor is the color of the background for selected text.
	SelectionColor color.NRGBA
	Editor         *widget.Editor
	// contains filtered or unexported fields
}

func Editor

func Editor(th *Theme, editor *widget.Editor, hint string) EditorStyle

func (EditorStyle) Layout

func (e EditorStyle) Layout(gtx layout.Context) layout.Dimensions

type IconButtonStyle

type IconButtonStyle struct {
	Background color.NRGBA
	// Color is the icon color.
	Color color.NRGBA
	Icon  *widget.Icon
	// Size is the icon size.
	Size   unit.Value
	Inset  layout.Inset
	Button *widget.Clickable
}

func IconButton

func IconButton(th *Theme, button *widget.Clickable, icon *widget.Icon) IconButtonStyle

func (IconButtonStyle) Layout

type LabelStyle

type LabelStyle struct {
	// Face defines the text style.
	Font text.Font
	// Color is the text color.
	Color color.NRGBA
	// Alignment specify the text alignment.
	Alignment text.Alignment
	// MaxLines limits the number of lines. Zero means no limit.
	MaxLines int
	Text     string
	TextSize unit.Value
	// contains filtered or unexported fields
}

func Body1

func Body1(th *Theme, txt string) LabelStyle

func Body2

func Body2(th *Theme, txt string) LabelStyle

func Caption

func Caption(th *Theme, txt string) LabelStyle

func H1

func H1(th *Theme, txt string) LabelStyle

func H2

func H2(th *Theme, txt string) LabelStyle

func H3

func H3(th *Theme, txt string) LabelStyle

func H4

func H4(th *Theme, txt string) LabelStyle

func H5

func H5(th *Theme, txt string) LabelStyle

func H6

func H6(th *Theme, txt string) LabelStyle

func Label

func Label(th *Theme, size unit.Value, txt string) LabelStyle

func (LabelStyle) Layout

func (l LabelStyle) Layout(gtx layout.Context) layout.Dimensions

type LoaderStyle

type LoaderStyle struct {
	Color color.NRGBA
}

func Loader

func Loader(th *Theme) LoaderStyle

func (LoaderStyle) Layout

func (l LoaderStyle) Layout(gtx layout.Context) layout.Dimensions

type Palette

type Palette struct {
	// Bg is the background color atop which content is currently being
	// drawn.
	Bg color.NRGBA

	// Fg is a color suitable for drawing on top of Bg.
	Fg color.NRGBA

	// ContrastBg is a color used to draw attention to active,
	// important, interactive widgets such as buttons.
	ContrastBg color.NRGBA

	// ContrastFg is a color suitable for content drawn on top of
	// ContrastBg.
	ContrastFg color.NRGBA
}

Palette contains the minimal set of colors that a widget may need to draw itself.

type ProgressBarStyle

type ProgressBarStyle struct {
	Color      color.NRGBA
	TrackColor color.NRGBA
	Progress   float32
}

func ProgressBar

func ProgressBar(th *Theme, progress float32) ProgressBarStyle

func (ProgressBarStyle) Layout

type RadioButtonStyle

type RadioButtonStyle struct {
	Key   string
	Group *widget.Enum
	// contains filtered or unexported fields
}

func RadioButton

func RadioButton(th *Theme, group *widget.Enum, key, label string) RadioButtonStyle

RadioButton returns a RadioButton with a label. The key specifies the value for the Enum.

func (RadioButtonStyle) Layout

Layout updates enum and displays the radio button.

type SliderStyle

type SliderStyle struct {
	Min, Max float32
	Color    color.NRGBA
	Float    *widget.Float

	FingerSize unit.Value
}

func Slider

func Slider(th *Theme, float *widget.Float, min, max float32) SliderStyle

Slider is for selecting a value in a range.

func (SliderStyle) Layout

func (s SliderStyle) Layout(gtx layout.Context) layout.Dimensions

type SwitchStyle

type SwitchStyle struct {
	Color struct {
		Enabled  color.NRGBA
		Disabled color.NRGBA
		Track    color.NRGBA
	}
	Switch *widget.Bool
}

func Switch

func Switch(th *Theme, swtch *widget.Bool) SwitchStyle

Switch is for selecting a boolean value.

func (SwitchStyle) Layout

func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions

Layout updates the switch and displays it.

type Theme

type Theme struct {
	Shaper text.Shaper
	Palette
	TextSize unit.Value
	Icon     struct {
		CheckBoxChecked   *widget.Icon
		CheckBoxUnchecked *widget.Icon
		RadioChecked      *widget.Icon
		RadioUnchecked    *widget.Icon
	}

	// FingerSize is the minimum touch target size.
	FingerSize unit.Value
}

func NewTheme

func NewTheme(fontCollection []text.FontFace) *Theme

func (Theme) WithPalette

func (t Theme) WithPalette(p Palette) Theme