FAQ.md

Elm-mdl FAQ

We want the process of using Elm-mdl as easy and smooth as possible. Check this faq before submitting issues.

Table of Contents

• How do I update this FAQ?
• General
  • Get started?
  • Get help?
  • How is Elm-mdl implemented
  • Other projects using Elm-mdl
  • Should I put MDL in each sub model?
• Layout component
  • Why doesn't layout resize properly?
• Menu component
  • Why doesn't menu close on off-menu clicks?
• Best practices
  • Best practice 1?
  • Best practice 2?
• Contributing to Elm-mdl
• Upgrading
  • Upgrading from 6.x.x
• Troubleshooting errors
  • Error type?

How do I update this FAQ?

Create an issue, or fork the FAQ and send a pull request (we can discuss changes and ideas as part of the pull request).

General

Get Started

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

For a long-form tutorial, you might like @jadams excellent "Introduction to elm-mdl", 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.

How is Elm-mdl implemented?

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. You can do either, but it's easier if you have a separate MDL model in each subcomponent.

Other projects using Elm-mdl

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

Should I put MDL in each sub model?

If I need to use mdl in subcomponents, should I put mdl in each submodel or should I lift all mdl commands to the parent msg and then pass down parent.mdl when rendering subviews?

Layout component

Why does not layout resize properly

Fill in text here

Menu component

Why does not menu close on off-menu clicks

Fill in text here

Best practices

Best practice 1

Some text

Best practice 2

Some text talking about code

some code

Contributing

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.

Upgrading

Upgrading from 6.x.x

The 7.0.0 release changes the required boilerplate in two aspects.

1. The type of elm-mdl messages should now be:

    type Msg =
      ...
      | Mdl (Material.Msg Msg)
   

2. Dispatching elm-mdl messages should now be:

    update message model =
      case message of
        ...
        Mdl message' ->
          Material.update message' model
   

Some components (notably menu) has changed API to varying degrees. If you run into troubles, refer to the code samples in the demo; check out the documentation, or ask on #elm-mdl in the elm-slack for help in migrating.

Troubleshooting errors

Error type

Solving error type 1