Documentation
¶
Overview ¶
slider implements a material slider component.
See: https://material.io/components/web/catalog/input-controls/sliders/
Example ¶
package main
import (
"fmt"
"log"
"syscall/js"
"github.com/vecty-components/material/components/internal/mdctest"
"github.com/vecty-components/material/components/slider"
)
func main() {
// Create a new instance of a material slider component.
c := slider.New()
printName(c)
printState(c)
c.Value = 10.0
c.Min = 5.5
c.Max = 50.0
c.Step = 5.0
c.Disabled = true
printState(c)
// Set up a DOM HTMLElement suitable for a slider.
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.Value = c.Value + 5
c.Min = c.Min + 5
c.Max = c.Max + 5
c.Step = c.Step + 5
c.Disabled = false
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 *slider.S) {
fmt.Printf("%s\n", c.Component().Type)
}
func printState(c *slider.S) {
fmt.Println()
fmt.Printf("[Go] Value: %v, Min: %v, Max %v, Step %v, Disabled: %v\n",
c.Value, c.Min, c.Max, c.Step, c.Disabled)
if !c.Component().Get("foundation_").IsUndefined() {
fmt.Printf("[JS] Value: %v, Min: %v, Max %v, Step %v, Disabled: %v\n",
c.Component().Get("foundation_").Get("value_"),
c.Component().Get("foundation_").Get("min_"),
c.Component().Get("foundation_").Get("max_"),
c.Component().Get("foundation_").Get("step_"),
c.Component().Get("foundation_").Get("disabled_"))
}
}
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: MDCSlider [Go] Value: 0, Min: 0, Max 0, Step 0, Disabled: false [Go] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true [Go] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true [JS] Value: 10, Min: 5.5, Max 50, Step 5, Disabled: true [Go] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false [JS] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false [Go] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false [JS] Value: 20, Min: 10.5, Max 55, Step 10, Disabled: false
Index ¶
Examples ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type S ¶
type S struct {
// The current value of the slider. Changing this will update the slider’s
// value.
Value float64 `js:"value"`
// The minimum value the slider can have. Values set programmatically will
// be clamped to this minimum value. Changing this property will update the
// slider’s value if it is lower than the new minimum.
Min float64 `js:"min"`
// The maximum value a slider can have. Values set programmatically will be
// clamped to this maximum value. Changing this property will update the
// slider’s value if it is greater than the new maximum.
Max float64 `js:"max"`
// Specifies the increments at which a slider value can be set. Can be any
// positive number, or 0 for no step. Changing this property will update the
// slider’s value to be quantized along the new step increments.
Step float64 `js:"step"`
// Whether or not the slider is disabled.
Disabled bool `js:"disabled"`
// contains filtered or unexported fields
}
S is a material slider component.
func (*S) Layout ¶
Layout recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize).
func (*S) Start ¶
Start initializes the component with an existing HTMLElement, rootElem. Start should only be used on a newly created component, or after calling Stop.
Source Files
Click to show internal directories.
Click to hide internal directories.