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 tealor 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 ~ floatingClass 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 unitSupported modules
CSS
Components
- Badges
- Buttons
- Breadcrumbs
- Cards
- Collections
- Floating Action Button (Class only)
- Footer
- Icons
- Navbar
- Pagination
- Preloader
JavaScript
- Auto Init
- Carousel (Class only)
- Collapsible
- Dropdown
- FeatureDiscovery
- Media (Class only)
- Modals
- Parallax
- Pushpin
- Scrollspy
- Sidenav
- Tabs
- Toasts
- Tooltips
- Waves
Forms
- Autocomplete
- Checkboxes
- Chips
- Pickers
- Radio Buttons
- Range
- Select
- Switches
- Text Inputs (Class 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.
