mdc

package module
v0.0.0-...-79ce7be Latest Latest
Warning

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

 Go to latest Published: Mar 7, 2022 License: MIT Imports: 10 Imported by: 0

README

mdc

Material Design Components for use with Vecty in the most minimalistic, dead simple fashion. Currently on MDC version 13.0.0.

Based on the good work done at vecty-components/material with the intent of being leaner on API and complexity.

Examples

See examples directory.

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func AddDefaultScripts 

func AddDefaultScripts(timeout time.Duration)

func AddDefaultStyles 

func AddDefaultStyles()

func Console 

func Console() io.Writer

Console returns the browser console as an io.Writer which one can use to set log output.

func SetDefaultViewport 

func SetDefaultViewport()

Types

type AppBarVariant 

type AppBarVariant int
const (
	VariantTopBarShort AppBarVariant
	VariantTopBarShortCollapsed
	VariantTopBarFixed
	VariantTopBarProminent
	VariantTopBarDense
)

func (AppBarVariant) AdjustClassName 

func (bv AppBarVariant) AdjustClassName() (class string)

func (AppBarVariant) ClassName 

func (bv AppBarVariant) ClassName() (class string)

type Button 

type Button struct {
	vecty.Core // Do not modify.

	Label *vecty.HTML `vecty:"prop"`
	// TODO(soypat) Not implemented yet.
	// Size      Size                   `vecty:"prop"`
	Applyer    vecty.Applyer          `vecty:"prop"` // custom applier
	Style      ButtonStyle            `vecty:"prop"`
	Disabled   bool                   `vecty:"prop"`
	Listeners  []*vecty.EventListener `vecty:"prop"`
	Icon       icons.Icon             `vecty:"prop"`
	ActionItem bool                   `vecty:"prop"`
}

Button implements the button Material Design Component https://material.io/components/buttons

Take care when adding buttons in <form> elements as they may act as Submit actions if not avoided correctly.

func (*Button) Render 

func (b *Button) Render() vecty.ComponentOrHTML

func (*Button) SetEventListeners 

func (b *Button) SetEventListeners(events ...*vecty.EventListener) *Button

type ButtonStyle 

type ButtonStyle int
const (
	ButtonRaised ButtonStyle
	ButtonOutline
	ButtonText
)

func (ButtonStyle) ClassName 

func (bs ButtonStyle) ClassName() (class string)

type Checkbox 

type Checkbox struct {
	vecty.Core

	ID       string      `vecty:"prop"`
	Label    *vecty.HTML `vecty:"prop"`
	Disabled bool        `vecty:"prop"`
	NoRipple bool        `vecty:"prop"`
}

Checkbox implements the checkbox Material Design component https://material.io/components/checkboxes. Checkboxes should always rendered as indeterminate on startup.

func (*Checkbox) Render 

func (cb *Checkbox) Render() vecty.ComponentOrHTML

type DataKind 

type DataKind int
const (
	DataString DataKind
	DataNumeric
	DataCheckbox
)

func (DataKind) CellClassName 

func (dk DataKind) CellClassName() (class string)

CellClassName returns the cell class.

type DataTable 

type DataTable struct {
	vecty.Core

	Columns []Series `vecty:"prop"`
	Rows    int      `vecty:"prop"`
}

DataTable implements the data table Material Design component https://material.io/components/data-tables

func (*DataTable) Render 

func (dt *DataTable) Render() vecty.ComponentOrHTML

type Dialog 

type Dialog struct {
	vecty.Core

	ID      string              `vecty:"prop"`
	Title   *vecty.HTML         `vecty:"prop"`
	Content vecty.MarkupOrChild `vecty:"prop"`
	// Label on the OK button
	OKLabel string        `vecty:"prop"`
	Variant DialogVariant `vecty:"prop"`
}

Dialog implements the dialog box as described by Material Design components https://material.io/components/dialogs/web.

func (*Dialog) Render 

func (d *Dialog) Render() vecty.ComponentOrHTML

type DialogVariant 

type DialogVariant int
const (

	// Full-screen dialogs group a series of tasks, such as creating a calendar entry with the event title, date, location, and time.
	VariantFullScreen DialogVariant
)

func (DialogVariant) ClassName 

func (sv DialogVariant) ClassName() (class string)
type Dropdown struct {
	vecty.Core

	ID   string `vecty:"prop"`
	List *List  `vecty:"prop"`
	// Anchor will be rendered in the place of the dropdown
	// and dropdown will display below it. If Anchor is not set
	// then the dropdown will be anchored to its parent
	Anchor *vecty.HTML `vecty:"prop"`
}

Dropdown implements the Menu component from Material Design's documentation https://material.io/components/menus 

func (d *Dropdown) Render() vecty.ComponentOrHTML

type FloatSeries 

type FloatSeries struct {
	Label string
	Data  []float64
	Prec  int
	// Floating point format verbs (see https://pkg.go.dev/fmt)
	//  'e': scientific notation, e.g. -1.234456e+78
	//  'E': scientific notation, e.g. -1.234456E+78
	//  'f': decimal point but no exponent, e.g. 123.456
	//  'g': %e for large exponents, %f otherwise. Precision is discussed below.
	//  'G': %E for large exponents, %f otherwise
	//  'x': hexadecimal notation (with decimal power of two exponent), e.g. -0x1.23abcp+20
	//  'X': upper-case hexadecimal notation, e.g. -0X1.23ABCP+20
	//  'b': decimalless scientific notation with exponent a power of two, in the manner of strconv.FormatFloat with the 'b' format e.g. -123456p-78
	Fmt byte
}

func (*FloatSeries) AtRow 

func (ss *FloatSeries) AtRow(i int) vecty.MarkupOrChild

func (*FloatSeries) Head 

func (ss *FloatSeries) Head() string

func (*FloatSeries) Kind 

func (ss *FloatSeries) Kind() DataKind

type IntSeries 

type IntSeries struct {
	Label string
	Data  []int
}

func (*IntSeries) AtRow 

func (ss *IntSeries) AtRow(i int) vecty.MarkupOrChild

func (*IntSeries) Head 

func (ss *IntSeries) Head() string

func (*IntSeries) Kind 

func (ss *IntSeries) Kind() DataKind

type Leftbar 

type Leftbar struct {
	vecty.Core

	Title     *vecty.HTML    `vecty:"prop"`
	Subtitle  *vecty.HTML    `vecty:"prop"`
	List      *List          `vecty:"prop"`
	Variant   LeftbarVariant `vecty:"prop"`
	Dismissed bool           `vecty:"prop"`
	Applyer   vecty.Applyer  `vecty:"prop"`
	NoJS      bool           `vecty:"prop"`
}

Leftbar implements the navigation drawer Material Design component https://material.io/components/navigation-drawer.

func (*Leftbar) Render 

func (lb *Leftbar) Render() vecty.ComponentOrHTML

type LeftbarVariant 

type LeftbarVariant int
const (
	VariantStandardLeftbar LeftbarVariant
	VariantDismissableLeftbar
	VariantModalLeftbar
)

func (LeftbarVariant) IsDismissable 

func (lb LeftbarVariant) IsDismissable() bool

type List 

type List struct {
	vecty.Core

	// Optional field. If empty string is passed will not register javascript handler.
	ID            string                        `vecty:"prop"`
	Items         vecty.List                    `vecty:"prop"`
	ListElem      ListElem                      `vecty:"prop"`
	ClickListener func(idx int, e *vecty.Event) `vecty:"prop"`
	// Role is for use with Menus (dropdown)
	Role string `vecty:"prop"`
}

List implements the list Material Design component https://material.io/components/lists.

func (*List) Render 

func (l *List) Render() vecty.ComponentOrHTML

type ListElem 

type ListElem int
const (
	ElementUnorderedList ListElem
	ElementOrderedList
	ElementNavigationList
	ElementDivList
)

func (ListElem) Element 

func (le ListElem) Element() (element func(markup ...vecty.MarkupOrChild) *vecty.HTML)

type ListItem 

type ListItem struct {
	vecty.Core

	Label        *vecty.HTML            `vecty:"prop"`
	Href         string                 `vecty:"prop"`
	Icon         icons.Icon             `vecty:"prop"`
	ListItemElem ListItemElem           `vecty:"prop"`
	Active       bool                   `vecty:"prop"`
	Listeners    []*vecty.EventListener `vecty:"prop"`
	Ripple       bool                   `vecty:"prop"`
	// Role is for use with menu (dropdown). Sets the Role property
	Role string `vecty:"prop"`
}

ListItem is a component for use with the List component.

func (*ListItem) Render 

func (l *ListItem) Render() vecty.ComponentOrHTML

type ListItemElem 

type ListItemElem int
const (
	ElementSpanListItem ListItemElem
	ElementAnchorListItem
)

func (ListItemElem) Element 

func (le ListItemElem) Element() (element func(markup ...vecty.MarkupOrChild) *vecty.HTML)
type Navbar struct {
	vecty.Core

	Variant       AppBarVariant `vecty:"prop"`
	SectionStart  vecty.List    `vecty:"prop"`
	SectionCenter vecty.List    `vecty:"prop"`
	SectionEnd    vecty.List    `vecty:"prop"`
}

Navbar represents a App bar in the top position. https://material.io/components/app-bars-top. 

func (tb *Navbar) AdjustmentClass() string

AdjustmentClass returns the class name for <main> element to adjust view. 

func (tb *Navbar) Render() vecty.ComponentOrHTML

type SPA 

type SPA struct {
	vecty.Core

	Navbar           *Navbar             `vecty:"prop"`
	Drawer           *Leftbar            `vecty:"prop"`
	Content          vecty.MarkupOrChild `vecty:"prop"`
	FullHeightDrawer bool                `vecty:"prop"`
}

SPA implements the suggested combination of Appbar with a drawer component according to Material Design guidelines https://material.io/components/navigation-drawer/web (see Usage with top app bar)

func (*SPA) Render 

func (spa *SPA) Render() vecty.ComponentOrHTML

type Series 

type Series interface {
	// Head is the title of the data.
	Head() string
	// Kind
	Kind() DataKind
	AtRow(i int) vecty.MarkupOrChild
}

Series interface is meant to be used with the DataTable component for displaying structured data.

type Size 

type Size int
const (
	SizeSmall Size
	SizeMedium
	SizeLarge
)

func (Size) Name 

func (s Size) Name() (str string)

type Slider 

type Slider struct {
	vecty.Core

	Name    string        `vecty:"prop"`
	Min     int           `vecty:"prop"`
	Max     int           `vecty:"prop"`
	Value   int           `vecty:"prop"`
	Step    int           `vecty:"prop"`
	Variant SliderVariant `vecty:"prop"`
}

Slider implements the slider Material Design component https://material.io/components/sliders/web#sliders. TODO(soypat): What is going on with this component? The examples in the online documentation do not yield a working slider?

func (*Slider) Mount 

func (s *Slider) Mount()

func (*Slider) Render 

func (s *Slider) Render() vecty.ComponentOrHTML

func (*Slider) SkipRender 

func (s *Slider) SkipRender(prev vecty.Component) bool

func (*Slider) Unmount 

func (s *Slider) Unmount()

type SliderVariant 

type SliderVariant int
const (
	VariantSliderContinuous SliderVariant
	// Also continuous.
	VariantSliderRange
	VariantSliderDiscrete
)

func (SliderVariant) ClassName 

func (sv SliderVariant) ClassName() (class string)

type StringSeries 

type StringSeries struct {
	Label string
	Data  []string
}

func (*StringSeries) AtRow 

func (ss *StringSeries) AtRow(i int) vecty.MarkupOrChild

func (*StringSeries) Head 

func (ss *StringSeries) Head() string

func (*StringSeries) Kind 

func (ss *StringSeries) Kind() DataKind

type Tooltip 

type Tooltip struct {
	vecty.Core

	ID    string      `vecty:"prop"`
	Label *vecty.HTML `vecty:"prop"`
}

Tooltip implements the tooltip Material Design component https://material.io/components/tooltips/web#tooltips.

From Material documentation: To ensure proper positioning of the tooltip, it's important that this tooltip element is an immediate child of the <body>, rather than nested underneath the anchor element or other elements.

func (*Tooltip) Apply 

func (tt *Tooltip) Apply(h *vecty.HTML)

func (*Tooltip) Render 

func (tt *Tooltip) Render() vecty.ComponentOrHTML

type Typography 

type Typography struct {
	vecty.Core // Do not modify.

	Applyer vecty.Applyer   `vecty:"prop"`
	Root    *vecty.HTML     `vecty:"prop"`
	Style   TypographyStyle `vecty:"prop"`
}

Typography implements Material Design's Typography element https://material.io/design/typography/the-type-system.html.

func (*Typography) Render 

func (t *Typography) Render() vecty.ComponentOrHTML

type TypographyStyle 

type TypographyStyle int
const (
	Headline1 TypographyStyle
	Headline2
	Headline3
	Headline4
	Headline5
	Headline6
	Subtitle1
	Subtitle2
	Body1
	Body2
	Caption
)

func (TypographyStyle) ClassName 

func (ts TypographyStyle) ClassName() (class string)

func (TypographyStyle) Element 

func (ts TypographyStyle) Element() (element func(markup ...vecty.MarkupOrChild) *vecty.HTML)

func (TypographyStyle) IsHeadline 

func (ts TypographyStyle) IsHeadline() bool

Source Files

View all Source files

Directories

Path Synopsis
examples
datatable
leftbar
lonely_button
navbar
spa

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.