Material Components for the Web Catalog

This is the catalog of components for Material Components for the web (MDC Web).

About

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.

Adding a new component

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 via this.

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 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')}
    );
  }
}

Add a new entry in the links in the render() method in ComponentSidebar.js:

const links = [
  ...,
  {
    content: 'Foo',
    url: '/foo',
  }
];

Add a <Route> in ComponentPage.js:

import FooCatalog from './FooCatalog';

class ComponentPage extends Component {
  ...
  renderComponentRoutes() {
    ...
    <Route path='/component/foo' component={FooCatalog} />
  }
}