This is the catalog of components for Material Components for the web (MDC Web).
Material Components for the web (MDC Web) help developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
Follow these steps to add a new component to the MDC Web demo catalog.
src
directory for the JSX (e.g. FooCatalog.js
). It should follow this template:import React, { Component } from 'react';
import ComponentCatalogPanel from './ComponentCatalogPanel.js';
import {MDCFoo} from '@material/foo/index';
import './styles/FooCatalog.scss';
const FooCatalog = () => {
return (
<ComponentCatalogPanel
hero={<FooHero />}
title='Foo'
description='A short description about the Foo component.'
designLink='https://material.io/guidelines/components/foo.html'
docsLink='https://material.io/components/web/catalog/foo/'
sourceLink='https://github.com/material-components/material-components-web/tree/master/packages/mdc-foo'
demos={<FooDemos />}
/>
);
}
class FooHero extends Component {
// Class methods for JS
render() {
return (
// JSX for the Foo component's hero header
);
}
}
class FooDemos extends Component {
// Class methods for JS
render() {
return (
// JSX for the Foo component demos
);
}
}
export default FooCatalog;
NOTE: If your components only require a
render
method, you can write functional components rather than classes, e.g.function Foo() { ... }
. In this case,props
are passed in as an argument instead of accessed viathis
.
src/styles
directory for styling the demo page (e.g. FooCatalog.scss
):@import "@material/foo/mdc-foo";
// Custom styles here
Add a SVG image associated with the component (e.g. foo_180px.svg
) to the src/images
directory.
Import the SVG and render a new list item inside the render()
element in ComponentImageList.js
:
import fooImg from './images/foo_180px.svg';
...
class ComponentImageList extends Component {
...
render() {
return (
...
{this.renderListItem('Foo', fooImg, 'foo')}
);
}
}
links
in the render()
method in ComponentSidebar.js
:const links = [
...,
{
content: 'Foo',
url: '/foo',
}
];
<Route>
in ComponentPage.js
:import FooCatalog from './FooCatalog';
class ComponentPage extends Component {
...
renderComponentRoutes() {
...
<Route path='/component/foo' component={FooCatalog} />
}
}
To start a local server of the catalog, run
npm start
Then point your browser to http://localhost:3000/.
To run a build that can be locally tested using any HTTP server:
npm run build
build
folder to material-components-web-catalog
live-server
)To deploy the catalog to GitHub pages, run
npm run deploy
You should see it live on https://material-components.github.io/material-components-web-catalog/.