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

Auto Init
Carousel (Classes only)
Collapsible
Dropdown
FeatureDiscovery
Media (Classes and Material box only)
Modals
Parallax
Pushpin
Scrollspy
Sidenav
Tabs
Toasts
Tooltips
Waves

Forms

Autocomplete
Checkboxes
Chips
Pickers
Radio Buttons
Range
Select
Switches
Text Inputs (Classes only)

(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.