开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

Material components for React

React components based on styles from Material Design Components Web project. Components are written in React.js. Doesn't use MDC foundation classes.

Installation

From CDN

<script src="https://unpkg.com/react-mdc-web/out/react-mdc-web.js"></script>

From package manager

npm i --save react-mdc-web

Theming

Default theme

• Include CSS with default theme into HTML page

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">

• Or import it into JS/JSX file

  // MyApp/index.js
  import 'material-components-web/dist/material-components-web.min.css';

Custom theme

Override default theme colors with Sass or with CSS Custom Properties, just follow these guides:

• Changing the theme with Sass
• Changing the theme with CSS Custom Properties

Usage

import React, { Component } from 'react'
import {Card, CardHeader, CardTitle, CardText, CardActions, Button} from 'react-mdc-web/lib';

class MyComponent extends Component {
  render() {
    return (
        <Card>
          <CardHeader>
            <CardTitle>
              Title goes here
            </CardTitle>
          </CardHeader>
          <CardText>
            Lorem ipsum dolor sit amet, sint adipiscing ius eu
          </CardText>
          <CardActions>
            <Button compact>Save</Button>
            <Button compact accent>Remove</Button>
          </CardActions>
        </Card>
    );
  }
}

More samples could be found on the Documentation Site

Contribution & Local Development Guide

1. create parent folder react-mdc-web-dev
2. clone/fork react-mdc-web inside the react-mdc-web-dev folder
3. create app for testing (for example: git clone https://github.com/kradio3/react-mdc-web-showcase)
4. should now have folder with react-mdc-web-showcase and react-mdc-web folders inside of it.
5. cd react-mdc-web-showcase
6. npm rm --save-dev react-mdc-web
7. npm i --save-dev ../react-mdc-web
8. npm i --save-dev material-components-web
9. npm start
10. cd ../react-mdc-web
11. npm run watch

License

MIT, see LICENSE for details