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

HBM/md-components: Material Design React Components

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

开源软件名称(OpenSource Name):

HBM/md-components

开源软件地址(OpenSource Url):

https://github.com/HBM/md-components

开源编程语言(OpenSource Language):

JavaScript 91.2%

开源软件介绍(OpenSource Introduction):

md-components

Greenkeeper badge

js-standard-style Build Status npm Coverage Status Code Climate

Installation

$ npm install --save md-components

Usage

/js/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Shell} from 'md-components'

class App extends React.Component {

  render() {
    return (
      <Shell title='my app'>
        <div>hello world</div>
      </Shell>
    )
  }

}

ReactDOM.render(<App />, document.getElementById('root'))

/css/index.scss

@import "../node_modules/md-components/css/base";

Fonts

The 'Roboto' font must be provided separetely and is not part of the package, e.g.:

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

Custom colors / Theming

md-components uses six colors:

  • primary
  • primary dark
  • primary light
  • accent
  • acent dark
  • accent light

The font color can be either "White" or "Black" and must be specified for each color respectively. Your main sass file might look like this:

@import "node_modules/md-components/css/base";

/* provide your custom colors */
$color-primary: #1B325F;
$color-primary-text: White;

$color-primary--dark: #303F9F;
$color-primary-text--dark: White;

$color-primary--light: #E8EAF6;
$color-primary-text--light: Black;

$color-accent: #FF4081;
$color-accent-text: White;

$color-accent--dark: #F50057;
$color-accent-text--dark: White;

$color-accent--light: #FF80AB;
$color-accent-text--light: Black;

@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";

The Google material color package provides convenient access to the "official" google color palette:

@import "palette";
@import "node_modules/md-components/css/base";

/* provide your custom colors */
$color-primary: palette(Indigo, 500);
$color-primary-text: White;

$color-primary--dark: palette(Indigo, 700);
$color-primary-text--dark: White;

$color-primary--light: palette(Indigo, 50);
$color-primary-text--light: Black;

$color-accent: palette(Pink, A200);
$color-accent-text: White;

$color-accent--dark: palette(Pink, A400);
$color-accent-text--dark: White;

$color-accent--light: palette(Pink, A100);
$color-accent-text--light: Black;

@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";

Development

  1. You have to link md-components into the ./examples folder. You cannot use a relative path from ./examples to the ./src since create-react-app will throw an error.
    $ cd examples && npm link ../ && cd ..
    
  2. To start "compilation" while watching for changes run
    $ npm run dev
    
  3. Run the examples project which uses all components
    $ npm run examples
    

IE11

If you want to support IE11, you need to supply an Array.prototype.findIndex polyfill with babel-polyfill or core-js. E.g with core-js:

npm i core-js --save
// your entry point e.g. index.js
import 'core-js/fn/array/find-index'
import ...

More Documents

New release

np - A better npm publish

$ np



鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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