https://github.com/aforemny/material-components-web-elm

Material Components for Elm
https://github.com/aforemny/material-components-web-elm

elm material-components material-design

Last synced: 1 day ago
JSON representation

Material Components for Elm

• Host: GitHub
• URL: https://github.com/aforemny/material-components-web-elm
• Owner: aforemny
• License: mit
• Created: 2019-01-03T12:30:35.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-21T11:51:37.000Z (5 months ago)
• Last Synced: 2025-01-22T08:04:06.768Z (9 days ago)
• Topics: elm, material-components, material-design
• Language: Elm
• Homepage: https://aforemny.github.io/material-components-web-elm
• Size: 3.94 MB
• Stars: 95
• Watchers: 13
• Forks: 20
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![build](https://github.com/aforemny/material-components-web-elm/workflows/build/badge.svg)

# Material Components for Elm

A [Material Design](https://material.io/design) framework.

This library is based on [Material Components for the

web](https://github.com/material-components/material-components-web) (MDC Web).

## Important links

- Getting Started Guide (TODO)

- [Demo](https://aforemny.github.io/material-components-web-elm)

## Quick start

This package relies upon JavaScript and CSS that need to be included in your

project separately. As a result, this library will _not_ work with e.g. `elm

reactor`. Instead you will need to use either a HTML file or a bundler, such as

webpack.

### Using HTML

You should [compile your Elm program to

JavaScript](https://guide.elm-lang.org/install/elm.html#elm-make) and include

it in a custom HTML document. From that HTML document, you have to include the

following assets to use this library.

Please make sure that the last two assets match this library's version (ie.

9.1.0) exactly.

```html

```

Refer to the [simple counter

example](https://github.com/aforemny/material-components-web-elm/blob/master/examples/simple-counter)

for a minimal starting point, specifically to the files

[`src/Main.elm`](https://github.com/aforemny/material-components-web-elm/blob/master/examples/simple-counter/src/Main.elm)

and

[`page.html`](https://github.com/aforemny/material-components-web-elm/blob/master/examples/simple-counter/page.html).

### Using a bundler

Install the JavaScript and CSS assets via npm:

```sh

$ npm install --save [email protected]

```

Then in your `index.js` add the following imports:

```js

require("material-components-web-elm/dist/material-components-web-elm.js");

require("material-components-web-elm/dist/material-components-web-elm.css");

```

## Contributions

Please [share your

experience](https://github.com/aforemny/material-components-web-elm/issues)

using this library! Use GitHub to [report bugs or ask

questions](https://github.com/aforemny/material-components-web-elm/issues),

too.