README
¶
Material Components For GopherJS
Material is GopherJS bindings for the material-components-web JavaScript library (MDC).
Project Status
Material is under active development, and the API is likely to change often, at any time. Input is encouraged regarding Material's design at this early stage.
The core Material component package is usable. Work is underway to implement the specific Material component types, which is tracked in an issue.
Getting Started
There is a quickstart guide in the material package documentation, and every component package's documentation page has a basic example of how to set up and use it.
Contributing
Any and all ideas, changes, bug reports, etc. are encouraged.
Get involved by:
- Opening issues and submitting merge requests at our Gitlab project .
- Starting a discussion in the Gopher Slack #GopherJS channel.
Project Goals
- Expose an API that supports idiomatic Go programming while maintaining the general terminology of MDC resources.
- Minimal dependencies to keep generated JavaScript sizes as small as possible.
- Modular package organization so you can pick-and-choose components just like the MDC library.
- Limited scope. Only focus on wrapping the JavaScript functionality of the MDC library.
Project Non-Goals
- HTML/CSS. These are areas of the MDC library that are best handled by projects that consume Material's packages. Check out vecty-material as an example.
Terminology
To help avoid ambiguity in code and documentation, here's a quick list of definitions we are trying to enforce in Material.
| Term | Definition |
|---|---|
| material-components-web | The official upstream JavaScript library. |
| MDC or MCW | Synonyms/abbreviations of material-components-web. |
| Material | This project. |
| Material component | Our agamigo.io/material/* Go packages. |
| Material menu | An example of a specific type of Material component. |
Documentation
¶
Overview ¶
Quickstart Guide
1. In your project include the all-in-one distribution of the MDC javascript library and set it to the global variable "mdc". This can be done a number of ways (HTML script element, webpack, filename "mdc.inc.js" for gopherjs to pick up, etc).
2. Import a Material component from this project in your Go progrem.
import "agamigo.io/material/checkbox"
3. Make the HTML suitable for that MDC component available to your GopherJS program. See: https://material.io/components/web/catalog/
<html>
<body>
<div class="mdc-checkbox">
<input class="mdc-checkbox__native-control" type="checkbox">
</div>
</body>
</html>
4. Put that HTMLElement into a GopherJS object.
cbElem := js.Global.Get("document").Get("body").Get("firstElementChild")
5. Create a new instance of the component and start it.
cb := checkbox.CB{}
cb.Start(cbElem)
Source Files
Directories
¶
| Path | Synopsis |
|---|---|
|
The base package contains code shared by implementations of material components for GopherJS.
|
The base package contains code shared by implementations of material components for GopherJS. |
|
checkbox implements a material checkbox component.
|
checkbox implements a material checkbox component. |
|
dialog implements a material dialog component.
|
dialog implements a material dialog component. |
|
formfield implements a material formfield component.
|
formfield implements a material formfield component. |
|
icontoggle implements a material icontoggle component.
|
icontoggle implements a material icontoggle component. |
|
internal
|
|
|
linearprogress implements a material linearprogress component.
|
linearprogress implements a material linearprogress component. |
|
menu implements a material menu component.
|
menu implements a material menu component. |
|
persistentdrawer implements a material persistentdrawer component.
|
persistentdrawer implements a material persistentdrawer component. |
|
radio implements a material radio component.
|
radio implements a material radio component. |
|
ripple implements a material ripple component.
|
ripple implements a material ripple component. |
|
selection implements a material selection component.
|
selection implements a material selection component. |
|
slider implements a material slider component.
|
slider implements a material slider component. |
|
snackbar implements a material snackbar component.
|
snackbar implements a material snackbar component. |
|
temporarydrawer implements a material temporarydrawer component.
|
temporarydrawer implements a material temporarydrawer component. |
|
textfield implements a material textfield component.
|
textfield implements a material textfield component. |
|
toolbar implements a material toolbar component.
|
toolbar implements a material toolbar component. |