v0.5.0 Latest Latest

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

Go to latest
Published: Feb 5, 2024 License: MIT, Unlicense Imports: 18 Imported by: 492



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) {

Use a Theme to draw the button:

theme := material.NewTheme(...)

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


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.Palette.Fg = color.NRGBA{...}

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

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

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 := widget.NewIcon(...)

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

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.



This section is empty.


This section is empty.


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 AnchorStrategy

type AnchorStrategy uint8

AnchorStrategy defines a means of attaching a scrollbar to content.

const (
	// Occupy reserves space for the scrollbar, making the underlying
	// content region smaller on one axis.
	Occupy AnchorStrategy = iota
	// Overlay causes the scrollbar to float atop the content without
	// occupying any space. Content in the underlying area can be occluded
	// by the scrollbar.

type ButtonLayoutStyle

type ButtonLayoutStyle struct {
	Background   color.NRGBA
	CornerRadius unit.Dp
	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         font.Font
	TextSize     unit.Sp
	Background   color.NRGBA
	CornerRadius unit.Dp
	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 DecorationsStyle

type DecorationsStyle struct {
	Decorations *widget.Decorations
	Actions     system.Action
	Title       LabelStyle
	Background  color.NRGBA
	Foreground  color.NRGBA

DecorationsStyle provides the style elements for Decorations.

func Decorations

func Decorations(th *Theme, deco *widget.Decorations, actions system.Action, title string) DecorationsStyle

Decorations returns the style to decorate a window.

func (DecorationsStyle) Layout

Layout a window with its title and action buttons.

type EditorStyle

type EditorStyle struct {
	Font font.Font
	// LineHeight controls the distance between the baselines of lines of text.
	// If zero, a sensible default will be used.
	LineHeight unit.Sp
	// LineHeightScale applies a scaling factor to the LineHeight. If zero, a
	// sensible default will be used.
	LineHeightScale float32
	TextSize        unit.Sp
	// 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.Dp
	Inset       layout.Inset
	Button      *widget.Clickable
	Description string

func IconButton

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

func (IconButtonStyle) Layout

type LabelStyle

type LabelStyle struct {
	// Face defines the text style.
	Font font.Font
	// Color is the text color.
	Color color.NRGBA
	// SelectionColor is the color of the background for selected text.
	SelectionColor color.NRGBA
	// Alignment specify the text alignment.
	Alignment text.Alignment
	// MaxLines limits the number of lines. Zero means no limit.
	MaxLines int
	// WrapPolicy configures how displayed text will be broken into lines.
	WrapPolicy text.WrapPolicy
	// Truncator is the text that will be shown at the end of the final
	// line if MaxLines is exceeded. Defaults to "…" if empty.
	Truncator string
	// Text is the content displayed by the label.
	Text string
	// TextSize determines the size of the text glyphs.
	TextSize unit.Sp
	// LineHeight controls the distance between the baselines of lines of text.
	// If zero, a sensible default will be used.
	LineHeight unit.Sp
	// LineHeightScale applies a scaling factor to the LineHeight. If zero, a
	// sensible default will be used.
	LineHeightScale float32

	// Shaper is the text shaper used to display this labe. This field is automatically
	// set using by all constructor functions. If constructing a LabelStyle literal, you
	// must provide a Shaper or displaying text will panic.
	Shaper *text.Shaper
	// State provides text selection state for the label. If not set, the label cannot
	// be selected or copied interactively.
	State *widget.Selectable

LabelStyle configures the presentation of text. If the State field is set, the label will be laid out as interactive (able to be selected and copied). Otherwise, the label will be non-interactive.

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.Sp, txt string) LabelStyle

func Overline

func Overline(th *Theme, txt string) LabelStyle

func Subtitle1

func Subtitle1(th *Theme, txt string) LabelStyle

func Subtitle2

func Subtitle2(th *Theme, txt string) LabelStyle

func (LabelStyle) Layout

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

type ListStyle

type ListStyle struct {
	// contains filtered or unexported fields

ListStyle configures the presentation of a layout.List with a scrollbar.

func List

func List(th *Theme, state *widget.List) ListStyle

List constructs a ListStyle using the provided theme and state.

func (ListStyle) Layout

func (l ListStyle) Layout(gtx layout.Context, length int, w layout.ListElement) layout.Dimensions

Layout the list and its scrollbar.

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
	Height     unit.Dp
	Radius     unit.Dp
	TrackColor color.NRGBA
	Progress   float32

func ProgressBar

func ProgressBar(th *Theme, progress float32) ProgressBarStyle

func (ProgressBarStyle) Layout

type ProgressCircleStyle

type ProgressCircleStyle struct {
	Color    color.NRGBA
	Progress float32

func ProgressCircle

func ProgressCircle(th *Theme, progress float32) ProgressCircleStyle

func (ProgressCircleStyle) 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 ScrollIndicatorStyle

type ScrollIndicatorStyle struct {
	// MajorMinLen is the smallest that the scroll indicator is allowed to
	// be along the major axis.
	MajorMinLen unit.Dp
	// MinorWidth is the width of the scroll indicator across the minor axis.
	MinorWidth unit.Dp
	// Color and HoverColor are the normal and hovered colors of the scroll
	// indicator.
	Color, HoverColor color.NRGBA
	// CornerRadius is the corner radius of the rectangular indicator. 0
	// will produce square corners. 0.5*MinorWidth will produce perfectly
	// round corners.
	CornerRadius unit.Dp

ScrollIndicatorStyle configures the presentation of a scroll indicator.

type ScrollTrackStyle

type ScrollTrackStyle struct {
	// MajorPadding and MinorPadding along the major and minor axis of the
	// scrollbar's track. This is used to keep the scrollbar from touching
	// the edges of the content area.
	MajorPadding, MinorPadding unit.Dp
	// Color of the track background.
	Color color.NRGBA

ScrollTrackStyle configures the presentation of a track for a scroll area.

type ScrollbarStyle

type ScrollbarStyle struct {
	Scrollbar *widget.Scrollbar
	Track     ScrollTrackStyle
	Indicator ScrollIndicatorStyle

ScrollbarStyle configures the presentation of a scrollbar.

func Scrollbar

func Scrollbar(th *Theme, state *widget.Scrollbar) ScrollbarStyle

Scrollbar configures the presentation of a scrollbar using the provided theme and state.

func (ScrollbarStyle) Layout

func (s ScrollbarStyle) Layout(gtx layout.Context, axis layout.Axis, viewportStart, viewportEnd float32) layout.Dimensions

Layout the scrollbar.

func (ScrollbarStyle) Width

func (s ScrollbarStyle) Width() unit.Dp

Width returns the minor axis width of the scrollbar in its current configuration (taking padding for the scroll track into account).

type SliderStyle

type SliderStyle struct {
	Axis  layout.Axis
	Color color.NRGBA
	Float *widget.Float

	FingerSize unit.Dp

func Slider

func Slider(th *Theme, float *widget.Float) 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 {
	Description string
	Color       struct {
		Enabled  color.NRGBA
		Disabled color.NRGBA
		Track    color.NRGBA
	Switch *widget.Bool

func Switch

func Switch(th *Theme, swtch *widget.Bool, description string) 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
	TextSize unit.Sp
	Icon     struct {
		CheckBoxChecked   *widget.Icon
		CheckBoxUnchecked *widget.Icon
		RadioChecked      *widget.Icon
		RadioUnchecked    *widget.Icon
	// Face selects the default typeface for text.
	Face font.Typeface

	// FingerSize is the minimum touch target size.
	FingerSize unit.Dp

func NewTheme

func NewTheme() *Theme

NewTheme constructs a theme (and underlying text shaper).

func (Theme) WithPalette

func (t Theme) WithPalette(p Palette) Theme

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL