mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
Removed remnants of native implementation.
This commit is contained in:
parent
81796418e3
commit
85c1b34fbd
5 changed files with 26 additions and 2 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -3,3 +3,4 @@ elm-stuff
|
||||||
elm.js
|
elm.js
|
||||||
index.html
|
index.html
|
||||||
docs.json
|
docs.json
|
||||||
|
documentation.json
|
||||||
|
|
15
README.md
15
README.md
|
@ -9,7 +9,7 @@ MDL is implemented primarily through CSS, with a little bit of Javascript
|
||||||
adding and removing CSS classes in response to DOM events. This port
|
adding and removing CSS classes in response to DOM events. This port
|
||||||
re-implements the CSS parts in Elm, but relies on the CSS of MDL verbatim.
|
re-implements the CSS parts in Elm, but relies on the CSS of MDL verbatim.
|
||||||
|
|
||||||
*CAUTION* This is an early and incomplete prototype. Use at your own risk.
|
*CAUTION*! This is an early and incomplete prototype. Use at your own risk.
|
||||||
|
|
||||||
|
|
||||||
### Get Started
|
### Get Started
|
||||||
|
@ -26,6 +26,19 @@ The library has a tiny native component (for measuring geometry of rendered
|
||||||
know no better way than to copy `Material.elm` and `Material/*` to your
|
know no better way than to copy `Material.elm` and `Material/*` to your
|
||||||
own project.
|
own project.
|
||||||
|
|
||||||
|
### Embedding in your own HTML.
|
||||||
|
|
||||||
|
Initial page load of the demo will produce a flicker, which can only be
|
||||||
|
avoided if you set up the MDL css to load before elm does. Use the file
|
||||||
|
`page.html` as a template. To build the demo in this mode, comment out
|
||||||
|
[line 153 in `examples/Demo.elm`](https://github.com/debois/elm-mdl/blob/master/examples/Demo.elm#L153)
|
||||||
|
and build the demo like this:
|
||||||
|
|
||||||
|
> elm-make examples/Demo.elm --output elm.js
|
||||||
|
|
||||||
|
This will produce a file `elm.js`. Open the file
|
||||||
|
[`page.html`](https://raw.githubusercontent.com/debois/elm-mdl/master/page.html) in your
|
||||||
|
browser; this file will set up MDL css and load `elm.js`.
|
||||||
|
|
||||||
### Contribute
|
### Contribute
|
||||||
|
|
||||||
|
|
|
@ -147,6 +147,9 @@ view addr model =
|
||||||
, tabs = Just tabTitles
|
, tabs = Just tabTitles
|
||||||
, main = [ top ]
|
, main = [ top ]
|
||||||
}
|
}
|
||||||
|
{- The following line is not needed when you manually set up
|
||||||
|
your html, as done with page.html.
|
||||||
|
-}
|
||||||
|> Material.topWithColors Material.Teal Material.Red
|
|> Material.topWithColors Material.Teal Material.Red
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,8 @@ module Material
|
||||||
{-| Material Design component library for Elm based on Google's
|
{-| Material Design component library for Elm based on Google's
|
||||||
[Material Design Lite](https://www.getmdl.io/).
|
[Material Design Lite](https://www.getmdl.io/).
|
||||||
|
|
||||||
|
This file contains CSS loaders only.
|
||||||
|
|
||||||
@docs Color, topWithColors, top
|
@docs Color, topWithColors, top
|
||||||
-}
|
-}
|
||||||
|
|
||||||
|
@ -97,6 +99,11 @@ to preview combinations.
|
||||||
Please be aware that Grey, Blue Grey, and Brown cannot be secondary colors. If
|
Please be aware that Grey, Blue Grey, and Brown cannot be secondary colors. If
|
||||||
you choose them as such anyway, you will get the default theme.
|
you choose them as such anyway, you will get the default theme.
|
||||||
|
|
||||||
|
Using this top-level container is not recommended, as most browsers will load
|
||||||
|
css concurrently with rendering the initial page, which will produce a flicker
|
||||||
|
on page load. The container is included only to provide an option to get started
|
||||||
|
quickly and for use with elm-reactor.
|
||||||
|
|
||||||
-}
|
-}
|
||||||
topWithColors : Color -> Color -> Html -> Html
|
topWithColors : Color -> Color -> Html -> Html
|
||||||
topWithColors primary accent content =
|
topWithColors primary accent content =
|
||||||
|
|
|
@ -6,7 +6,7 @@ import Html.Events
|
||||||
import Json.Decode as Json exposing ((:=), at)
|
import Json.Decode as Json exposing ((:=), at)
|
||||||
import Effects exposing (Effects, tick, none)
|
import Effects exposing (Effects, tick, none)
|
||||||
|
|
||||||
import Material.Aux exposing (Rectangle, rectangleDecoder, effect)
|
import Material.Aux exposing (effect)
|
||||||
import DOM
|
import DOM
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue