Elm Polymer
Elm bindings to some of the PolymerElements Web Components.
Install
elm-package install lzrski/elm-polymer
You also need to link Polymer web components bundle in your HTML:
<link rel="import" href="https://cdn.rawgit.com/lzrski/elm-polymer/1.0.0/assets/web-components-bundle.html">
If you don't want to use CDN you can also download it. It's just this one file.
Use
Import some modules and start playing with it:
import Polymer.Paper.IconButton exposing (iconButton)
import Polymer.Paper.IconButton.Attributes exposing (icon)
view model =
iconButton [ icon "menu" ] [ ]
Here! You have a one-button app :P
You may find it beneficial for the experience to also add following markup to your HTML's head':
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
type="text/css"
href="//fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext"
/>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
</style>
Idea
Most of the code is generated by processing data exposed at https://www.webcomponents.org/api
See scripts/scaffold for some hairy shell scripting that seems to actually work
Once scaffolded the code can be manually edited. It isn't my intention to use this generation forever. Just to get it going.
Big thanks to @edvail for his prior implementation of elm-polymer and @rtfeldman's Elm Google Map example for inspiration.
Contributing
If you want to contribute (please do!) here is how to use local copy of this library in your app.
-
Clone this repository.
-
Soft-link
src/Polymer
to your app'ssrc/
, e.g.:ln -s ../../elm-polymer/src/Polymer src/
Now you may make changes to the library and your app should pick them up on next build. Please share back via PR.