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.
- Add a new file to the
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
.
- Add a new file to the
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 thesrc/images
directory. -
Import the SVG and render a new list item inside the
render()
element inComponentImageList.js
:
import fooImg from './images/foo_180px.svg';
...
class ComponentImageList extends Component {
...
render() {
return (
...
{this.renderListItem('Foo', fooImg, 'foo')}
);
}
}
- Add a new entry in the
links
in therender()
method inComponentSidebar.js
:
const links = [
...,
{
content: 'Foo',
url: '/foo',
}
];
- Add a
<Route>
inComponentPage.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
- Rename the
build
folder tomaterial-components-web-catalog
- Serve the top-level repository directory (e.g. with
live-server
) - Browse to http://localhost:/material-components-web-catalog/
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/.