Material-UI is a set of React components that implement Google's Material Design specification.
Check out our documentation site for live examples. It's still a work in progress, but hopefully you can see where we're headed.
This fork of http://callemall.github.io/material-ui/ add support to create a Meteor package. Testing have been done in a limited fashion. It should support both client and server side rendering but has only been tested for client rendering.
The meteor-bundle.js file must be rebuild manually and comitted before pushing this package to Atmosphere (there is no way to do that automatically).
To use this package, you MUST also add the reactjs:react package to your app. This package has a weak dependency on it so it is loaded first, but does not depends on a particular version of it.
You need to use reactjs:react version 0.2.4 and higher.
This meteor package exports mui and injectTapEventPlugin (which is stubbed to a noop function on server).
/**
* @jsx React.DOM
*/
/* global React, ReactMeteor, Session, Meteor, mui, injectTapEventPlugin */
injectTapEventPlugin();
var ThemeManager = mui.Styles.ThemeManager();
var App = ReactMeteor.createClass({
templateName: 'App',
getMeteorState: function() {
return {
};
},
getChildContext: function() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},
childContextTypes: {
muiTheme: React.PropTypes.object
},
render: function() {
var contentStyle = {
paddingTop: ThemeManager.getCurrentTheme().component.appBar.height
}
return <mui.AppCanvas predefinedLayout={1}>
<mui.AppBar title="My App"></mui.AppBar>
<div className="app-content-canvas" style={contentStyle}>
/* ... */
</div>
</mui.AppCanvas>;
}
});We recommend that you get started with the React Library before diving into material-ui for a better understanding. Should you choose to skip this, don't worry, we'll explain relevant React concepts as they come along.
Material-UI is available as an npm package.
npm install material-uiUse browserify and reactify for dependency management and JSX transformation.
Some components use react-tap-event-plugin to listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be sure to inject this plugin at the start of your app.
var injectTapEventPlugin = require("react-tap-event-plugin");
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();Be sure to include the Roboto font in your project. Here are some instructions on how to include it in your project.
Once material-ui is included in your project, you can use the components this way:
/** MyAwesomeReactComponent.jsx */
var React = require('react'),
mui = require('material-ui'),
RaisedButton = mui.RaisedButton;
var MyAwesomeReactComponent = React.createClass({
render: function() {
return (
<RaisedButton label="Default" />
);
}
});
module.exports = MyAwesomeReactComponent;Material-UI components have their styles defined inline. There are two approaches to overriding these styles:
- Override individual component styles via the
styleprop - Define a Theme to apply overarching style changes
This allows you to override variables used by components without having to modify material-ui source files directly.
There are 2 projects that you can look at to help you get started. The first project can be found in the example folder. This is a basic project that shows how you can consume material-ui components in your own project.
The second project is the actual documentation site. This is a more complex project but will give examples of every component. Check out the docs folder for build instructions.
Material-UI came about from our love of React and Google's Material Design. We're currently using it on a project at Call-Em-All and plan on adding to it and making it better. If you'd like to help, check out the docs folder. We'd greatly appreciate any contribution you make. :)
This project is licensed under the terms of the MIT license