Back to godoc.org
gioui.org/widget/material

package material

v0.0.0 (278e9bc)
Latest Go to latest
Published: Jun 3, 2020 | Licenses: MIT, Unlicense | Module: gioui.org

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.RGBA{...}

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

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.

type ButtonLayoutStyle

type ButtonLayoutStyle struct {
	Background   color.RGBA
	CornerRadius unit.Value
	Inset        layout.Inset
	Button       *widget.Clickable
}

func ButtonLayout

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

func (ButtonLayoutStyle) Layout

func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Dimensions

type ButtonStyle

type ButtonStyle struct {
	Text string
	// Color is the text color.
	Color        color.RGBA
	Font         text.Font
	TextSize     unit.Value
	Background   color.RGBA
	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

func (c CheckBoxStyle) Layout(gtx layout.Context) layout.Dimensions

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.RGBA
	// Hint contains the text displayed when the editor is empty.
	Hint string
	// HintColor is the color of hint text.
	HintColor color.RGBA
	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.RGBA
	// Color is the icon color.
	Color color.RGBA
	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

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

type LabelStyle

type LabelStyle struct {
	// Face defines the text style.
	Font text.Font
	// Color is the text color.
	Color color.RGBA
	// 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 ProgressBarStyle

type ProgressBarStyle struct {
	Color    color.RGBA
	Progress int
}

func ProgressBar

func ProgressBar(th *Theme, progress int) ProgressBarStyle

func (ProgressBarStyle) Layout

func (p ProgressBarStyle) Layout(gtx layout.Context) layout.Dimensions

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

func (r RadioButtonStyle) Layout(gtx layout.Context) layout.Dimensions

Layout updates enum and displays the radio button.

type SwitchStyle

type SwitchStyle struct {
	Color  color.RGBA
	Switch *widget.Bool
}

func Switch

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

func (SwitchStyle) Layout

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

Layout updates the checkBox and displays it.

type Theme

type Theme struct {
	Shaper text.Shaper
	Color  struct {
		Primary color.RGBA
		Text    color.RGBA
		Hint    color.RGBA
		InvText color.RGBA
	}
	TextSize unit.Value
	// contains filtered or unexported fields
}

func NewTheme

func NewTheme() *Theme
Documentation was rendered with GOOS=linux and GOARCH=amd64.

Jump to identifier

Keyboard shortcuts

? : This menu
f or F : Jump to identifier