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