在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):HBM/md-components开源软件地址(OpenSource Url):https://github.com/HBM/md-components开源编程语言(OpenSource Language):JavaScript 91.2%开源软件介绍(OpenSource Introduction):md-componentsInstallation$ npm install --save md-components Usage
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
请发表评论