README
¶
GO bindings for Material-Web to be used with GO-APP
example
package main
import (
"log"
"net/http"
md "github.com/BrownNPC/material-web-go-app"
"github.com/maxence-charriere/go-app/v10/pkg/app"
)
type Example struct {
app.Compo
}
func (h *Example) Render() app.UI {
return app.Div().
//center using grid layout
Body(
md.LinearProgress().
Attr("indeterminate", true),
md.Icon().Text("settings"),
app.H1().Text("Hello World").Class("md-typescale-display-large"),
md.FilledTextField().Attr("value", "Hello World"),
md.FilledIconButton().
Body(md.Icon().
Text("settings"),
),
md.Slider(),
md.ChipSet().
Body(
md.AssistChip().Text("assist chip"),
md.FilterChip().Text("filter chip"),
),
)
}
func main() {
handler := &app.Handler{
Name: "Material Design App",
RawHeaders: append(md.RawHeaders(), md.LinkIconFontOutlined()),
}
app.Route("/", func() app.Composer { return &Example{} })
app.RunWhenOnBrowser()
log.Fatal(http.ListenAndServe(":8000", handler))
}
To run this
go mod init app
go mod tidy
GOOS=js GOARCH=wasm go build -ldflags="-s -w" -o web/app.wasm
go run .
Documentation
¶
Index ¶
- func AssistChip() app.HTMLElem
- func BrandedFab() app.HTMLElem
- func Checkbox() app.HTMLElem
- func ChipSet() app.HTMLElem
- func CircularProgress() app.HTMLElem
- func Dialog() app.HTMLElem
- func Divider() app.HTMLElem
- func ElevatedButton() app.HTMLElem
- func Elevation() app.HTMLElem
- func Fab() app.HTMLElem
- func FilledButton() app.HTMLElem
- func FilledIconButton() app.HTMLElem
- func FilledSelect() app.HTMLElem
- func FilledTextField() app.HTMLElem
- func FilledTonalButton() app.HTMLElem
- func FilledTonalIconButton() app.HTMLElem
- func FilterChip() app.HTMLElem
- func FocusRing() app.HTMLElem
- func Icon() app.HTMLElem
- func IconButton() app.HTMLElem
- func InputChip() app.HTMLElem
- func LinearProgress() app.HTMLElem
- func LinkIconFontOutlined() string
- func LinkIconFontRounded() string
- func LinkIconFontSharp() string
- func List() app.HTMLElem
- func ListItem() app.HTMLElem
- func Menu() app.HTMLElem
- func MenuItem() app.HTMLElem
- func OutlinedButton() app.HTMLElem
- func OutlinedIconButton() app.HTMLElem
- func OutlinedSelect() app.HTMLElem
- func OutlinedTextField() app.HTMLElem
- func PrimaryTab() app.HTMLElem
- func Radio() app.HTMLElem
- func RawHeaders() []string
- func Ripple() app.HTMLElem
- func SecondaryTab() app.HTMLElem
- func SelectOption() app.HTMLElem
- func Slider() app.HTMLElem
- func SubMenu() app.HTMLElem
- func SuggestionChip() app.HTMLElem
- func Switch() app.HTMLElem
- func Tabs() app.HTMLElem
- func TextButton() app.HTMLElem
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func AssistChip ¶
Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen.
Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI.
func BrandedFab ¶
Branded FABs use a brightly colored logo for their icon. Unlike FAB, branded FABs do not have color variants.
https://github.com/material-components/material-web/blob/main/docs/components/fab.md#branded-fab
func Checkbox ¶
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list.
func ChipSet ¶
Chips should always appear in a set. Chip sets are toolbars that can display any type of chip or other toolbar items.
func CircularProgress ¶
Circular progress indicators display progress by animating along an invisible circular track in a clockwise direction.
func Divider ¶
A divider is a thin line that groups content in lists and containers.
Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion.
func ElevatedButton ¶
Elevated buttons are essentially filled tonal buttons with a shadow.
To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.
func Fab ¶
Floating Action Button FAB represents the most important action on a screen. It puts key actions within reach.
Extended FABs help people take primary actions. They're wider than FABs to accommodate a text label and larger target area.
func FilledButton ¶
Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.
func FilledIconButton ¶
Filled icon buttons have higher visual impact and are best for high emphasis actions.
func FilledSelect ¶
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.
Select (also referred to as a dropdown menu) allows choosing a value from a fixed list of available options.
func FilledTextField ¶
Text fields let users enter text into a UI.
Filled and outlined text fields are functionally identical.
func FilledTonalButton ¶
A filled tonal button is an alternative middle ground between filled and outlined buttons.
They're useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow.
func FilledTonalIconButton ¶
Filled tonal icon buttons are a middle ground between filled and outlined icon buttons.
They're useful in contexts where the button requires slightly more emphasis than an outline would give, such as a secondary action paired with a high emphasis action.
func FilterChip ¶
Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes.
func FocusRing ¶
Focus rings are accessible outlines for components to show keyboard focus.
Focus rings follow the same heuristics as :focus-visible to determine when they are visible.
func Icon ¶
Icons can be specified by name, unicode code point, or have an <svg> child element.
You must load the appropriate icon font to use icons. `LinkIconFontRounded()`, `LinkIconFontSharp()` and `LinkIconFontOutlined()` are available.
https://github.com/material-components/material-web/blob/main/docs/components/icon.md#mdicon-md-icon
func IconButton ¶
Standard icon buttons do not have a background or outline, and have the lowest emphasis of the icon buttons.
func InputChip ¶
Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a search field.
Input chips whose icons are user images may add the avatar attribute to display the image in a larger circle.
func LinearProgress ¶
Linear progress indicators display progress by animating along the length of a fixed, visible track.
func LinkIconFontOutlined ¶
func LinkIconFontOutlined() string
This icon font features outlined symbols, providing a distinct style.
use the append() function to add this to your RawHeaders app property
func main() {
handler := &app.Handler{
Name: "Material Design App",
RawHeaders: append(md.RawHeaders(), md.LinkIconFontOutlined()),
}
func LinkIconFontRounded ¶
func LinkIconFontRounded() string
This icon font is the default one used in Material Design 3.
use the append() function to add this to your RawHeaders app property
func main() {
handler := &app.Handler{
Name: "Material Design App",
RawHeaders: append(md.RawHeaders(), md.LinkIconFontOutlined()),
}
func LinkIconFontSharp ¶
func LinkIconFontSharp() string
This icon font is similar to the rounded one, but with sharp corners.
use the append() function to add this to your RawHeaders app property
func main() {
handler := &app.Handler{
Name: "Material Design App",
RawHeaders: append(md.RawHeaders(), md.LinkIconFontOutlined()),
}
func List ¶
Lists are continuous, vertical indexes of text and images <md-list> is a container composed of <md-list-item>s of different types.
https://github.com/material-components/material-web/blob/main/docs/components/list.md
func ListItem ¶
Lists are continuous, vertical indexes of text and images <md-list> is a container composed of <md-list-item>s of different types.
https://github.com/material-components/material-web/blob/main/docs/components/list.md
func Menu ¶
When opened, menus position themselves to an anchor.
Thus, either anchor or anchorElement must be supplied to md-menu before opening.
Additionally, a shared parent of position:relative should be present around the menu and it's anchor, because the default menu is positioned relative to the anchor element.
https://github.com/material-components/material-web/blob/main/docs/components/menu.md#mdmenu-md-menu
func MenuItem ¶
Menus also render menu items such as md-menu-item and handle keyboard navigation between md-menu-items as well as typeahead functionality. Additionally, md-menu interacts with md-menu-items to help you determine how a menu was closed.
Listen for and inspect the close-menu custom event's details to determine what action and items closed the menu.
func OutlinedButton ¶
Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
func OutlinedIconButton ¶
Outlined icon buttons are medium-emphasis icon buttons.
They contain actions that are important, but aren’t the primary action in an app.
func OutlinedSelect ¶
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.
Select (also referred to as a dropdown menu) allows choosing a value from a fixed list of available options.
func OutlinedTextField ¶
Text fields let users enter text into a UI.
Filled and outlined text fields are functionally identical.
func PrimaryTab ¶
Primary tabs are placed at the top of the content pane under a top app bar.
They display the main content destinations.
func RawHeaders ¶
func RawHeaders() []string
func Ripple ¶
Ripples are state layers used to communicate the status of a component or interactive element.
A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape.
func SecondaryTab ¶
Secondary tabs are used within a content area to further separate related content and establish hierarchy.
func SelectOption ¶
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu.
Select (also referred to as a dropdown menu) allows choosing a value from a fixed list of available options.
func Slider ¶
Sliders allow users to view and select a value (or range) along a track. They're ideal for adjusting settings such as volume and brightness, or for applying image filters.
Sliders can use icons or labels to represent a numeric or relative scale.
func SubMenu ¶
You can compose <md-menu>s inside of an <md-sub-menu>'s menu slot,
but first the has-overflow attribute must be set on the root <md-menu> to disable overflow scrolling and display the nested submenus.
func SuggestionChip ¶
Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses or search filters.
func Switch ¶
Switches toggle the state of an item on or off.
Switches are similar to checkboxes, and can be unselected or selected.
func Tabs ¶
Tabs organize groups of related content that are at the same level of hierarchy.
Tabs contain multiple primary or secondary tab children. Use the same type of tab in a tab bar.
https://github.com/material-components/material-web/blob/main/docs/components/tabs.md#mdtabs-md-tabs
func TextButton ¶
Text buttons are used for the lowest priority actions, especially when presenting multiple options.
Types ¶
This section is empty.
Source Files