textfield

Documentation

Overview

textfield implements a material textfield component.

See: https://material.io/components/web/catalog/input-controls/text-field/

Example

package main

import (
	"fmt"
	"log"

	"agamigo.io/material/internal/mdctest"
	"agamigo.io/material/textfield"
	"github.com/gopherjs/gopherjs/js"
)

func main() {
	// Create a new instance of a material textfield component.
	c := textfield.New()
	printName(c)
	printState(c)
	c.Required = false
	c.HelperText = "Must be at least 8 characters."
	c.Value = "longerpassword"
	c.Disabled = true
	printState(c)

	// Set up a DOM HTMLElement suitable for a textfield.
	js.Global.Get("document").Get("body").Set("innerHTML",
		mdctest.HTML(c.Component().Type.MDCClassName))
	rootElem := js.Global.Get("document").Get("body").Get("firstElementChild")

	// Start the component, which associates it with an HTMLElement.
	err := c.Start(rootElem)
	if err != nil {
		log.Fatalf("Unable to start component %s: %v\n",
			c.Component().Type, err)
	}

	printState(c)
	c.Required = false
	c.HelperText = "Must be at least 8 characters."
	c.Value = "longerpassword"
	c.Disabled = true
	printState(c)

	err = c.Stop()
	if err != nil {
		log.Fatalf("Unable to stop component %s: %v\n",
			c.Component().Type, err)
	}
	printState(c)

}

func printName(c *textfield.TF) {
	fmt.Printf("%s\n", c.Component().Type)
}

func printState(c *textfield.TF) {
	fmt.Println()
	fmt.Printf("Disabled: %v, Valid: %v, Required: %v\n",
		c.Disabled, c.Valid, c.Required)
	fmt.Printf("Value:%v, HelperText:%v\n", c.Value, c.HelperText)
}

func init() {
	// We emulate a DOM here since tests run in NodeJS.
	// Not needed when running in a browser.
	err := mdctest.Init()
	if err != nil {
		log.Fatalf("Unable to setup test environment: %v", err)
	}
}

Output:

MDCTextField

Disabled: false, Valid: true, Required: false
Value:, HelperText:

Disabled: true, Valid: true, Required: false
Value:longerpassword, HelperText:Must be at least 8 characters.

Disabled: true, Valid: true, Required: false
Value:longerpassword, HelperText:Must be at least 8 characters.

Disabled: true, Valid: true, Required: false
Value:longerpassword, HelperText:Must be at least 8 characters.

Disabled: true, Valid: true, Required: false
Value:longerpassword, HelperText:Must be at least 8 characters.

Index

• type TF
  • func New() *TF
  • func (c *TF) Component() *base.Component
  • func (tf *TF) Layout() error
  • func (c *TF) Start(rootElem *js.Object) error
  • func (c *TF) StateMap() base.StateMap
  • func (c *TF) Stop() error

Examples

• Package

Types

type TF

type TF struct {

	// The current value of the textfield. Changing this will update the
	// textfield’s value.
	Value string `js:"value"`

	// Whether or not the textfield is disabled.
	Disabled bool `js:"disabled"`

	// Valid and Required are updated according to HTML5 validation markup.
	Valid    bool `js:"valid"`
	Required bool `js:"required"`

	// HelperText provides supplemental information and/or validation
	// messages to users. It appears on input field focus and disappears on
	// input field blur by default, or it can be persistent.
	HelperText string `js:"helperText"`
	// contains filtered or unexported fields
}

TF is a material textfield component.

func New

func New() *TF

New returns a new component.

func (*TF) Component

func (c *TF) Component() *base.Component

Component returns the component's underlying base.Component.

func (*TF) Layout

func (tf *TF) Layout() error

Layout adjusts the dimensions and positions for all sub-elements.

func (*TF) Start

func (c *TF) Start(rootElem *js.Object) error

Start initializes the component with an existing HTMLElement, rootElem. Start should only be used on a newly created component, or after calling Stop.

func (*TF) StateMap

func (c *TF) StateMap() base.StateMap

StateMap implements the base.StateMapper interface.

func (*TF) Stop

func (c *TF) Stop() error

Stop removes the component's association with its HTMLElement and cleans up event listeners, etc.