开源软件名称（OpenSource Name）：HBM/md-components开源软件地址(OpenSource Url)：https://github.com/HBM/md-components开源编程语言(OpenSource Language)：JavaScript 91.2%开源软件介绍(OpenSource Introduction)：md-components
Installation$ npm install --save md-componentsUsage
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'))
@import "../node_modules/md-components/css/base";FontsThe '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 / Themingmd-components uses six colors:
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
IE11If you want to support IE11, you need to supply an npm i core-js --save// your entry point e.g. index.js
import 'core-js/fn/array/find-index'
import ...More Documents
New release
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论