React Material Components Web
React wrapper of Material Components Web
Under Active Development
The project is under active development.
Every updates can contain breaking changes before 0.2.0.
We do not recommend you to use this library for produciton applications at this time.
Documentation
You can find documentation with live demo at https://react-mdc.github.io/
Features
Typed strictly with TypeScript
You can access typing support by also using TypeScript
Stylesheet independent
Since Material Components Web can be customized with scss,it does not depend on specific stylesheet.You can load your own stylesheet or a default one.
Each component packaged individually
Like Material Components Web, You can access all components individually,under @react-mdc npm scope.
Getting Start
Install the library
$ npm install --save @react-mdc/typography
Import the stylesheet
<link type="text/css" href="/static/material-components-web.min.css" rel="stylesheet" />
Or load using webpack and scss-loader
my-mdc.scss
// My main Sass file.
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #76ff03;
$mdc-theme-background: #fff;
@import "material-components-web/material-components-web";
app.js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./stylesheets/my-mdc.scss";
import Main from './main.js';
ReactDOM.render(<Main />, document.getElementById('root'));
And import @react-mdc then give it a shot.
main.js
import * as React from "react";
import Typography from "@react-mdc/typography";
export default class Main extends React.Component<{}, {}> {
render () {
return (
<Typography>
<Typography.Title>
This is an example
</Typography.Title>
<Typography.Body2>
Hello world!
</Typography.Body2>
</Typography>
);
}
}
Setup for Development
Bootstrap
$ lerna bootstrap
Build
$ npm run build
Run Docs
$ cd docs
$ npm start
Watch for Changes and Build
$ npm run watch
Run Test
$ npm test
to watch
$ npm test:watch
-
文章目录 前言 一、环境的搭建 1、安装node.js 2、安装yarn 二、安装react项目 1.安装react+ts 三、项目运行 四、项目框架结构 五、常用的集成和配置 1、React Router（路由配置管理） 2、redux（数据管理） redux 的项目使用详细 3、axios配置 4、UI组件 5、craco 6、多环境打包运行配置 1.1、内置环境 1.2、dotenv
-
Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines. App structure and navigation Buttons Input and selections Dialogs, alerts, and panels Information displays Layo
-
Nativescript Material Components Build beautiful, usable products using Material Components for NativeScript. Installation Android Ensure your Android Theme is inheriting from MaterialComponents.Insid
-
Material Components for the web(MDC Web)，是谷歌专为Web设计的全新前端框架。MDC Web可帮助开发人员执行Material Design，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的Web项目。 Material Components for the web是Material Design Li
-
iOS Material 组件（MDC-iOS）可以帮助开发人员实现 Material Design 风格，由谷歌的核心工程师团队和UX设计人员开发，是模块化且可定制的。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的 iOS 应用。 iOS Material 组件用 Objective-C 编写，支持 Swift 和 界面构造器（Interface Builder）。
-
安卓 Material 组件（MDC-Android）可以帮助开发人员实现 Material Design 风格，由谷歌的核心工程师团队和UX设计人员开发，是模块化且可定制的。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的安卓应用。 安卓 Material 组件可以直接替换（a drop-in replacement）安卓的设计支持库。
-
ember-react-components Consume React components in Ember This addon is a proof-of-concept for an approach to rendering React components in Ember. It is almost entirely inspired by a blog post by Sivak