• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

kradio3/react-mdc-web: Material Design Components for React

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

kradio3/react-mdc-web

开源软件地址(OpenSource Url):

https://github.com/kradio3/react-mdc-web

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

Material components for React

Maintenance Status NPM version Travis build

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:

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




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap