purescript-materialize

Materialize bindings in PureScript, with a builtin purescript-smolder-style DSL.

Overview

Class DSL

Class DSL is a domain-specific language that makes it easy to markup Materialize CSS classes.

A statement in Class DSL starts with a subject, followed by required objects

import Materialize.Color (Color, background, teal)

color :: Color
color = background teal

or optional objects.

import Materialize.Buttons (Button, button, floating)
import Materialize.Markup ((~))
import Materialize.Overriden (large)

plainButton :: Button
plainButton = button

largeButton :: Button
largeButton = button ~ large

floatingButton :: Button
floatingButton = button ~ floating

largeFloatingButton :: Button
largeFloatingButton = button ~ large ~ floating

Class DSL is meant to be spoken along with Smolder DSL. Here is an example to describe a complex Button:

import Data.Typelevel.Num (d1)
import Text.Smolder.Markup (Markup, text, (!))
import Text.Smolder.HTML (div)
import Prelude

import Materialize.Buttons (button, floating)
import Materialize.Color (background, teal, lighten)
import Materialize.Markup (classList, (~))
import Materialize.Overriden (large)
import Materialize.Visibility (hide, on)
import Materialize.Waves (waves, light)


viewButton :: forall e. Markup e
viewButton =
    div ! classList do
            button ~ large ~ floating
            background teal ~ lighten d1
            waves ~ light
            hide ~ on large
        $ text "Click me"

which renders to HTML:

<div class="btn-large btn-floating teal lighten-1 waves-effect waves-light hide-on-large-only">
    Click me
</div>

See test cases for more examples.

DOM API

Some material designs cannot be implemented with pure CSS, e.g., Tooltips. Therefore, it is sometimes inevitable to interact with Materialize's API in JavaScript. Hopefully, included is a PureScript API that abstracts away the DOM manipulation required by the Materialize API.

import Data.Traversable (traverse)
import Effect (Effect)
import Prelude
import Web.DOM.ParentNode (ParentNode)

import Materialize.DOM (findElements, findInstances, init, open, destroy)
import Materialize.Tooltips (Tooltip)


initTooltipsAndOpen :: Effect ParentNode -> Effect Unit
initTooltipsAndOpen parentNode = do
    _ :: Array Tooltip <- parentNode >>= findElements
        >>= traverse (init { enterDelay: 400.0
                           , outDuration: 40.0
                           })
        >>= traverse open
    pure unit

destroyTooltips :: Effect ParentNode -> Effect Unit
destroyTooltips parentNode = do
    _ :: Array Tooltip <- parentNode >>= findInstances >>= traverse destroy
    pure unit

Supported modules

CSS

Components

JavaScript

Forms

(Pull requests are welcomed) :)

Installation

bower install purescript-materialize

Additionally, Materialize 1.0.0-rc needs to be installed. An easy way is to add the following line into the <body> block of index.html, before the <script> tag of PureScript code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

There are other ways to install Materialize, but please make sure that the gloabl Materialize object M is available.

Documentation

Module documentation is published on Pursuit.