A pattern to display application modal dialogs via Materialize, written in coffeescript.
Warning: Only tested on Meteor 1.2+
Before submitting an issue please make sure that the issue is not a problem in materializecss. All the CSS except for the full screen modal is pulled from the materializecss framework and we try not to fix issues with that framework in this package.
-
The callbacks have changed form in version 1.0 to reflect the 'node way'. So you need to change your callback from
callback(yesNo, ...)
tocallback(error, rtn)
.yesNo
is now atrtn.submit
! If you don't have time to make the change lock your package at the 0.4.0 versionmeteor add pfafman:materialize-modal@=0.4.0
-
There is now a very good example site done by @msolters, who also did the refractoring work for version 1.0. and added new modals!
meteor add meteorstuff:materialize-modal
or for the old callback version
meteor add meteorstuff:materialize-modal@=0.4.0
You are required to get Materialize on your own, either from a package or inserting it manually into your meteor app. This allows you to either use a CSS or SASS version for more customization.
MaterializeModal.[message|alert|error|confirm|prompt|form|loading|progress](options={})
-
title - modal title. Can have HTML markup
-
label - Strong label in front of body
-
message - message body. Can have HTML markup
-
placeholder - If prompt then the placehoder for the text field
-
callback(error, rtn) - callback function with
- rtn.submit - bool true if the user hit the OK/Submit button
- rtn.value - applicable data object key:value
-
dismissible - (bool) If false, modal will not close when the user clicks the background.
-
bodyTemplate - Name of the template to use as the body for the modal.
-
icon - Markup for the icon to display
-
closeLabel - Text for close/dismiss button
-
submitLabel - Text for ok/submit button
-
fixedFooter - (bool) true if you want to use a fixed footer
-
bottomSheet - (bool) true if you want a bottom sheet modal
-
fullscreen - (bool) Modal takes up all the full screen
-
opacity - (int) Opacity of modal background default 0.5
-
inDuration - (int) Transition in duration default 200
-
outDuration - (int) Transition out duration default 0 for fullscreen 300 otherwise
-
ready - function() Callback for Modal open
You can change the UI by overwriting the CSS.
.materialize-modal {
// See source for all the css vars
}
To display a modal
MaterializeModal.message
title: 'Title'
message: 'some message'
MaterializeModal.alert
message: 'some message'
MaterializeModal.error
message: 'some message'
MaterializeModal.confirm
title: 'title'
message: 'You feeling groovy?'
callback: (error, rtn) ->
if rtn?.submit
Materialize.toast("Glad to here it!", 3000, 'green')
else
Materialize.toast("Too bad")
MaterializeModal.prompt
message: 'Enter something'
callback: (error, rtn) ->
if rtn?.submit
Materialize.toast("You entered #{rtn.value}", 3000, 'green')
MaterializeModal.form
bodyTemplate: 'testForm'
callback: (error, rtn ->
if rtn.submit
console.log("Form data", rtn.value)
There might be are more undocumented options that need to be documented. See code.
MIT