Meteor Autoform Materialize templates
Adds materialize templates for autoform.
Important I have recently taken lead of this project from @djhi. Thank you all contributors for getting this package up to this point. I will try my best to make it even better. Additional contributors are wanted!
Important I have been naugthy and merging and deployed untested code on head that doesn't currently work. Sorry, will use branches going forward instead. I am working to fix this asap.
Important This package has now been moved from Atmosphere to NPM as per current Meteor best practice.
Setup
- In your project folder run:
$ meteor npm install meteor-autoform-materialize --save
- In a client side single load file (ex:
/imports/startup/client/autoform.js
)
import { AutoForm } from 'meteor/aldeed:autoform';
import 'meteor-autoform-materialize';
AutoForm.setDefaultTemplate('materialize');
You must add materialize SCSS yourself. Some packages can help:
- materialize:materialize
meteor add materialize:materialize
- poetic:materialize-scss
meteor add poetic:materialize-scss
Usage and demo
You can checkout the playground
Additional type
PickADate
Materialize uses pickadate for date inputs.
You can apply it directly in your template:
{{> afFieldInput name='dateFieldName' type="pickadate"}}
You can also specify it at the schema level:
MySchema = new SimpleSchema({
dateFieldName: {
type: Date
autoform: {
type:"pickadate"
}
}
});
Choosing a Timezone
By default, the field's value will be a Date
object representing the selected date and time in the browser's timezone (i.e., based on the user's computer time settings). In most cases, you probably want the Date
object relative to some other timezone that you have previously stored. For example, if the form is setting the start date of an event, you want the date to be relative to the event venue's timezone. You can specify a different IANA timezone ID by adding a timezoneId
attribute.
date: type: Date autoform: type: "pickadate" timezoneId: "America/New_York"
Or:
> afFieldInput name="typeTest" type="pickadate" timezoneId="America/New_York"
Automatic Type Conversions
This input type is intended to be used with type: Date
schema keys, but it also works with other schema types. Here's a list:
Date
: Value is stored as aDate
object representing the selected date and time in the timezone you specified with thetimezoneId
attribute. By default, the timezone is that of the browser (i.e., the user's computer time settings).String
: Value is stored as a string representation of the selected date in ISO format, e.g., "2014-11-25T00:00:00".Number
: Value is stored as the result of callinggetTime()
on theDate
object (representing the selected date and time in the timezone you specified).Array
: If the schema expects an array ofDate
orString
orNumber
, the value is converted to a one-item array and stored.
To provide pickadate options, set a pickadateOptions
attribute equal to a helper that returns the options object.
Switch
You an also use switches
At the template level:
{{> afFieldInput name='dateFieldName' type="switch"}}
At the schema level:
MySchema = new SimpleSchema({
booleanFieldName: {
type: Boolean
autoform: {
type:"switch"
}
}
});
You may specify the trueLabel
or falseLabel
options to customize the switch.
At the template level:
{{> afFieldInput name='dateFieldName' type="switch" trueLabel="Online" falseLabel="Offline"}}
At the schema level:
MySchema = new SimpleSchema({
booleanFieldName: {
type: Boolean
autoform: {
type:"switch"
trueLabel:"Online"
falseLabel:"Offline"
}
}
});
If you need other values than boolean, you may specify the trueValue
or falseValue
options to customize the switch.
At the template level:
{{> afFieldInput name='dateFieldName' type="switch" trueValue="online" falseValue="offline"}}
At the schema level:
MySchema = new SimpleSchema({
booleanFieldName: {
type: Boolean
autoform: {
type:"switch"
trueValue:"online"
falseValue:"offline"
}
}
});
Time Picker
Time picker depends on foursever/meteor-scss for generating css. To use timepicker in your project, add the following somewhere in your sass import chain:
@import "{mozfet:meteor-autoform-materialize}/styles.scss";
Input with prepended icon
You can add icon to any field like this:
{{> afQuickField name='subject' icon='person'}}
For blank space in place of icon, just use "none":
{{> afQuickField name='subject' icon='none'}}
It also works for textarea:
{{> afQuickField name='message' type='textarea' icon='person'}}
Troubleshooting
Extra carets on selects
This happen when using materialize version 0.97.0
. A fix has been released with version 0.97.1
but there are other issues.
You should use poetic:materialize-scss
until those problems are corrected.
Maintainers
Building (on a Mac)
This package uses https://github.com/fourseven/meteor-scss V4.5.0, a preprocessor taking scss files as input and producing css files.
Since fourseven:scss 3.9.0+ there are no pre-build binaries anymore. In order to build and publish this package you are required to set up the required toolchain yourselves as per https://github.com/nodejs/node-gyp.
Before publishing, set python path install xcode command line tools, then:
$ export PYTHON=/usr/bin/python
$ npm install -g node-gyp
$ cd myProjectPath
$ node-gyp configure
$ node-gyp build
Publishing
Update version number in package.js.
Add, commit and push to git repo:
$ git add .
$ git commit -m "msg"
$ git push
Publish on atmosphere the first time, as per https://atmospherejs.com/i/publishing:
$ meteor publish --create
Republish on atmosphere, as per https://atmospherejs.com/i/publishing:
$ meteor publish
Contributors
- Gildas Garcia (@djhi)
- Razvan Teslaru (@rteslaru)
- Chun Yang (@Chun-Yang)
- Wynand Vermeulen (@mozfet)
License
autoform-materialize is licensed under the MIT Licence, courtesy of marmelab.