debois/elm-mdl

Elm-port of the Material Design Lite CSS/JS library

This repository is no longer actively updated. The underlying Google Material Design Lite library is now on limited support; as a consequence, this library will not receive additional updates.

To use Material Design components with elm, try @aforemny's elm-mdc.

Material Design Components for Elm

Port of Google's Material Design Lite CSS/JS implementation of the Material Design Specification.

Live demo & package documentation.

.

Migration

If you are updating from 7.x.x, refer to the Migration guide.

Get Started

Adapt examples/Counter.elm to suit your needs. The Live demo contains code samples for most components, which you may find helpful.

Use one of the templates to get an easy starting point into elm-mdl.

For a long-form tutorial, you might like the excellent "Introduction to elm-mdl" by @knewter, available as both a daily drip video and a very nice writeup.

Get help

For more in-depth documentation, refer to the extensive package documentation.

Ask any questions you may have on stackoverflow or on #elm-mdl in the elm-slack.

Frequently asked questions

Please read the FAQ here.

Other projects using Elm-mdl

Check out the users page for a list of projects using elm-mdl.

Contribute

Contributions are warmly encouraged! Whether you are a newcomer to Elm or an accomplished expert, the MDL port presents interesting challenges. Refer to this page for a detailed list of possible contributions.

Most importantly: Do report bugs. The elm-mdl library aims to provide a completely smooth experience with Material Design for elm developers. No bug is too small.

You may want to read the hints on how to get your issue resolved quickly but you don't have to.

Implementation

MDL is implemented primarily through CSS, with a little bit of JavaScript adding and removing CSS classes in response to DOM events. This port re-implements the JavaScript parts in Elm, but relies on the CSS of MDL verbatim.

elm-mdl's Issues

Router integration for demo tabs

Each tab in the demo should have its own URL so that they can be linked directly. E.g., going to https://debois.github.io/elm-mdl/#grid should go to the demo with the Grid tab selected.

Elm has various routers one might integrate with.

Demo pages for Textfield, Button, Grid needs lead text

All pages should look like the Snackbar page. Relevant sources:
examples/Demo/Snackbar.elm, examples/Demo/Buttons.elm, examples/Demo/Textfield.elm, examples/Demo/Grid.elm. Find relevant text in the MDL docs, e.g., grid (scroll down past the initial example).

Snackbar component has inadequate documentation

The
Snackbar needs documentation. Refer to
MDL docs for inspiration, then
add elm-doc comments in the
Snackbar module.

Swipe-able tabs?

Are you planning on introducing swipe-able tabs in this thang?

Layout should have 'Transparent header' option

MDL docs: https://www.getmdl.io/components/index.html#layout-section/layout

Implement Dialog component

See here.

Layout does not register event "transitionend"

This is a known issue for Elm. We're waiting for elm-html to hopefully fix this.

Aria properties missing in Snackbar

MDL documentation recommends adding various Aria properties to Snackbar. The
current implementation doesn't do that.

Layout component doesn't display scrolling arrows for tabs

When there are too many tabs in the layout component to fit on the screen, scrolling arrows should be displayed. This is not implemented yet.

Relevant code here. See also MDL docs (scroll down a bit).

Implement Tabs component

See here.

Implement menu component

Underway in PR #33.

Unable to Import Material Helpers

Whenever I try the to import the Helpers module compiler complains about not being able to find it.

"I cannot find module 'Material.Helpers'."

This was a problem with 2.1 and now with 3.

Every other module is OK...

Implement List component

See here. Lists seems to only require html and CSS and so are likely are good starting point.

Layout header/drawer content builders should use/be Style

link, navigation, etc.

Badge component has minor omissions in documentation

The Badge component wrong copy-pasted text in a few places.

Layout content builders should support icons in links

E.g., MDL links to github in the header like this:

<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github">
  <i class="material-icons">link</i>
  <span>GitHub</span>
</a>

Toggle Drawer

I want to have a drawer with items in it. When I click on an item, my main model will be updated but how can I instruct the drawer to close?

Menus don't close when clicked outside

This should be possible to fix now, because we can subscribe to document clicks using the Mouse package and we have the Geometry of an opened menu.

Password Field

I looked at the source and docs and couldn't spot how or whether to specify password input text fields

Textfield should implement also multi-line

The layout component should have a demo-tab

Since we're in Elm, it would be easy to make a demo-page for the Layout component that allows one to try out the various options (fixed...) layout provides.

The scrolling is disabled on a page with a fixed drawer

When using Layout.fixedDrawer option, the resulting content page does not scroll .

Cannot Import Material.Menu

Thanks for the contribution, but had an issue when trying to use Material.Menu. Unless I am just trying to use it incorrectly, I get an error that I can't import Material.Menu. Was able to fix this by updating the elm-package.json to expose Material.Menu. There were some more missing from the elm-package (Ripple, Shadow, Template, Toggles).

New to Elm, so like I said this could be user error, but this fixed it for me.

Color demo

The demo needs a demonstration of the palette/color helpers, a la the Material Specification.

Since its possible to change the MDL stylesheet loaded while the demo is running, it would be need if the color page also allowed to change the main color theme of the entire demo app.

Git clone error

Not sure if this is only a problem on my machine, but I'm getting this error message when cloning your repository:

Cloning into 'elm-mdl'...
remote: Counting objects: 42, done.
remote: Compressing objects: 100% (29/29), done.
remote: Total 42 (delta 11), reused 41 (delta 10), pack-reused 0
Unpacking objects: 100% (42/42), done.
Checking connectivity... done.
error: unable to create file Material/Aux.elm (No such file or directory)
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'

Aria-properties for layout

A few html nodes in src/Material/Layout.src needs aria attributes. Lift from Google's implementation here:

• Fragment 1
• Fragment 2
• Fragment 3

Travic CI and elm-test

To automate verification with multiple contributors, would it help if we set up Travis CI integration and some simple testing?

Travis CI is free for open source and hooks up to the Github repository.
Travis CI

The readme on elm-test has a description on how to set up a .travis.yml file. I guess it could could work without tests in the beginning, just to ensure everything compiles when pushing to Github.

I don't think we need extensive testing, but with elm-test we could get faster feedback on development and also double as documentation on how to use elm-mdl components.

Allow Change of Menu Icon

debois,

Needed to have multiple menus on a page so needed to be able to change what icon displays for them. Attached my version of Menu.elm with the changes, basically just imported Icon, setup an option and changed line 347 to set the Icon as whatever was sent in config.
Menu.elm.txt

Usage:
"
userMenu : Models.Model -> Html Messages.Msg
userMenu model =
div []
[
Menu.render MDL [0] model.mdl
[ Menu.bottomRight
, Menu.ripple
, Menu.icon "account_circle"
]
[ Menu.Item False True <| div [] [ text "My Profile" ]
, Menu.Item False True <| div [] [ text "Log In" ]
]

]
"

Would it be on the scope of this to have a collapse feature similar to bootstrap one?

Animations in Snackbar demo/elm-html-animation integration

The snackbar demo animates the transition between undoable and not undable by changing depth. (Click the "Snackbar" button a couple of times to see this.)
However, boxes appear and disappear too abruptly; there should be animations also on appearance and disappearance of boxes.

It'd be real interesting to see if this can be done neatly using
elm-html-animation.

Typography does not resemble getmdl.io pages

The title on the snackbar demo page is of different size, weight and opacity of the MDL Styles page .

Implement Tooltip component

See here.

Typography module

Material design defines typography styles in great detail. MDL apparently (but undocumentedly) implements this.

We should have the corresponding Styles in a Typography module with demo page etc.

Implement table component

Could you assign me to this one? I'm planning to do tables next.

[QUESTION] A separate model for every component or not?

In Component.elm:

type alias Model = { count : Int , mdl : Material.Model -- Boilerplate: mdl is the Model store for any and all MDL components you need. }

"mdl is the Model store for any and all MDL components you need." - Okay, nice so I only need one?

But in Component-TEA.elm:

type alias Model = { count : Int , increaseButtonModel : Button.Model , resetButtonModel : Button.Model }

Eee, so do I need to prepare a separate model for every component I add? Don't get me wrong, hyped about the lib even with the boilerplate, but there seems to be a difference in the two examples.

Hide header when scrolling main content

The Whatsapp messenger has this behavior. When you scroll down (swipe up), the header title (not the tabs) starts to disappear. I tried binding elm-scroll, but it's not that simple.

Shadow/elevation module

MDL defines CSS styles for elevation, i.e., shadows. We should have a module + demo page with corresponding Styles.

Scrolling up leads to stuttering animation

On https://debois.github.io/elm-mdl/#/badges, scrolling up leads to a stuttering animation (the header bar starts folding, unfolds again - this repeats 6 or 7 times).

No other page in the demo triggered it - but that page is the only one where the content exactly fits into my viewport.
I guess it's an unintended interaction between starting the folding animation and checking the available space to see if folding is necessary.

Upgrade to Elm 0.17

no onClick function for Layout.link

I’m not using any routing, so how can I get a Layout.link to emit a message?
with an a I could use onClick, how can I do this with Layout.link?

Top aligned menus don't behave correctly after selecting an Item

As witnessed currently in the demo, if you select (click) a menu item of one of the bottom menus and open it again, the items are not aligned properly.

I have an implementation that fixes that, but I have yet to figure out why. In any case, I will push the fix shortly.

Find a way to import MDL animation mixins

Implement Card component

Including elm-autocomplete with Material Styling

Hi! I'm the author of elm-autocomplete and I'd love to add this component to the material design lite suite of components.

Currently, my component strictly follows the elm architecture with init, update and view as the only essential functions exposed. You can see in the example code for integrating this component into an Elm application, that all the styles for views of the component are injectable via a function mapping an exposed union type to Html.Attribute (This API might change slightly to return List String instead to limit customization to solely css class names).

I made this issue as a point of discussion: Would you like the implementation of components in this library to be strictly homogenous? If not, I could make a PR with elm-autocomplete as an elm-mdl dependency. Then, I would add a module that wraps the Autocomplete, adding the necessary material animations and stylings. This will also be a good chance to see where my API is limited, so a definite win-win.

What are your thoughts on this? And thanks for writing this library!

P.S. I was actually in the room during the video call during the Elm hack night on Tuesday and thought you explained your reasons for the current architecture quite well. I hope we can solve the problem of material design, bootstrap, foundation, and other styled component libraries being ditched in projects when heavy style customization is necessary. I think by providing a pure functional interface for mapping styles to component views, developers will not have to reimplement the core logic and behavior of these components themselves.

Demo template is not updated to 0.17

If you copy demo/Demo/Template.elm to demo/Demo/MyTemplate.elm and import it in demo/Demo.elm, demo does not compile.

Feature collaboration

Could I suggest that you create separate issues for each of the features you want contributions on? Then contributors could avoid working on the same issue?

It is also possible to use waffle.io (free for open source) as a simple Kanban board.

fixedDrawer and Responsiveness

I was playing around with the Layout.fixedDrawer option and it seems to create issues on screens where the drawer is hidden - my understanding is that fixedDrawer makes the drawer fixed on large screens, but hidden on small screens. It is hidden, but there's a large space between the hamburger icon and the rest of the header.

Here's what the issue looks like:

On displays 1024px and smaller:

On displays larger than 1024px:

Layout keyboard shortcuts

The drawer in Layout should open and close on various keyboard shortcuts. Specifically:

• Close on escape if open and not fixed.
• Open and close on enter/spacebar when the drawer button is selected.

FAB ripple only when clicked on the edge

Implement Footer component

See here. CSS only.