Skip to content

Commit 66457c8

Browse files
committed
Update README.md
1 parent 6451ea7 commit 66457c8

File tree

1 file changed

+11
-58
lines changed

1 file changed

+11
-58
lines changed

README.md

Lines changed: 11 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,28 @@
11
#### Note
2+
This is WIP of converting Material-UI to React-Native.
23

3-
For *how-to* questions and other non-issues, please use [StackOverflow](http://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
4+
# Material-UI-Native
45

5-
#[Material-UI](http://callemall.github.io/material-ui/)
6-
[![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui)
7-
[![Build Status](https://travis-ci.org/callemall/material-ui.svg?branch=master)](https://travis-ci.org/callemall/material-ui)
8-
[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
9-
10-
[![PeerDependencies](https://img.shields.io/david/peer/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=peerDependencies&view=list)
11-
[![Dependencies](https://img.shields.io/david/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui)
12-
[![DevDependencies](https://img.shields.io/david/dev/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=devDependencies&view=list)
13-
14-
Material-UI is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
15-
16-
Check out our [documentation site](http://www.material-ui.com/) for live examples. It's still a work in progress, but hopefully you can see where we're headed.
17-
18-
## Prerequisites
19-
20-
We recommend that you get to know [React](http://facebook.github.io/react/) before diving into material-ui. Material-UI is a set of React components, so understanding how React fits into web development is important.
21-
22-
(If you're not familiar with Node, or with the concept of Single Page Applications (SPAs), head over to the [documentation website](http://material-ui.com/#/get-started/prerequisites) for a quick introduction before you read on.)
6+
Material-UI-Native is a set of [React Native](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
237

248
## Installation
259

26-
Material-UI is available as an [npm package](https://www.npmjs.org/package/material-ui).
10+
Material-UI-Native is available as an [npm package](https://www.npmjs.org/package/material-ui-native).
2711
```sh
28-
npm install material-ui
12+
npm install material-ui-native
2913
```
3014
After npm install, you'll find all the .jsx files in the /src folder and their compiled versions in the /lib folder.
3115

32-
### React-Tap-Event-Plugin
33-
Some components use [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) to
34-
listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be
35-
sure to inject this plugin at the start of your app.
36-
```js
37-
let injectTapEventPlugin = require("react-tap-event-plugin");
38-
39-
//Needed for onTouchTap
40-
//Can go away when react 1.0 release
41-
//Check this repo:
42-
//https://github.com/zilverline/react-tap-event-plugin
43-
injectTapEventPlugin();
44-
```
45-
46-
### Roboto Font
47-
Material-UI was designed with the [Roboto](http://www.google.com/fonts/specimen/Roboto) font in mind. So be sure to include it in your project. Here are [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500) on how to do so.
48-
4916
## Usage
5017

5118
Using material-ui components is very straightforward. Once material-ui is included in your project, you can use the components this way:
5219

5320
```js
54-
//Basic React component that renders a material-ui
21+
//Basic React component that renders a material-ui-native
5522
//raised button with the text "Default"
5623

57-
const React = require('react');
58-
const RaisedButton = require('material-ui/lib/raised-button');
24+
const React = require('react-native');
25+
const RaisedButton = require('material-ui-native/lib/raised-button');
5926

6027
const MyAwesomeReactComponent = React.createClass({
6128
render() {
@@ -69,22 +36,8 @@ module.exports = MyAwesomeReactComponent;
6936

7037
```
7138

72-
## Customization
73-
74-
We have implemented a default theme to render all Material-UI components. Styling components to your liking is simple and hassle-free. This can be achieved in the following two ways:
75-
76-
* [Use a custom theme to style components](http://material-ui.com/#/customization/themes)
77-
* [Override individual component styles via the `style` prop](http://material-ui.com/#/customization/inline-styles)
78-
79-
## Examples
80-
81-
There are 2 projects that you can look at to get started. They can be found in the [examples folder](https://github.com/callemall/material-ui/tree/master/examples). These projects are basic examples that show how to consume material-ui components in your own project. The first project uses [browserify](http://browserify.org/) for module bundling and [gulp](http://gulpjs.com/) for JS task automation, while the second project uses [webpack](http://webpack.github.io/) for module bundling and building.
82-
83-
The source code for this documentation site is also included in the repository. This is a slightly more complex project that also uses webpack, and contains examples of every material-ui component. Check out the [docs folder](https://github.com/callemall/material-ui/tree/master/docs) for build instructions.
84-
85-
## Contribute
86-
87-
[Material-UI](http://www.material-ui.com/) came about from our love of [React](http://facebook.github.io/react/) and [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html). We're currently using it on a project at [Call-Em-All](https://www.call-em-all.com/) and plan on adding to it and making it better. If you'd like to help, check out the [docs folder](https://github.com/callemall/material-ui/tree/master/docs). We'd greatly appreciate any contribution you make. :)
39+
## Converted Components
40+
- RaisedButton
41+
- Card*
8842

8943
## License
90-
This project is licensed under the terms of the [MIT license](https://github.com/callemall/material-ui/blob/master/LICENSE)

0 commit comments

Comments
 (0)