Skip to content

Latest commit

 

History

History
108 lines (89 loc) · 3.59 KB

docsite-index.md

File metadata and controls

108 lines (89 loc) · 3.59 KB
title layout path
Material Components for the Web
homepage
/

{% contentfor benefits %}

  • Accurate & up to date

    Implement Material Design with pixel-perfect components, maintained by Google engineers and designers

  • Seamless integrations

    Use components designed to work in any context, allowing seamless integration with libraries like React, AngularJS, and server-side rendering

  • Industry standards

    Take advantage of components developed with minimal dependencies and tested for flexibility, accessibility, and internationalization

{% endcontentfor %}

Getting Started

Get up and running with Material Components for web

  1. {: .step-list-item } ### Install the library

    Start by installing the library from npm:

    npm install material-components-web

  2. {: .step-list-item } ### Include the stylesheet

    Include the MDC Web stylesheet in the head of your file

    <html>
  <head>
    <title>Material Components for the web</title>
    <link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
  </head>

  3. {: .step-list-item } ### Add components

    Add components to the body of your HTML

      <body class="mdc-typography">
    <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
      <input type="text" class="mdc-text-field__input" id="demo-input">
      <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
    </div>
  </body>

  4. {: .step-list-item } ### Add scripts and instantiate

    Add the MDC Web scripts and call MDC Auto Init.

    <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>

    A full example of the HTML could look like this:

    <!DOCTYPE html>
<html>
  <head>
    <title>Material Components for the web</title>
    <link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
  </head>
  <body class="mdc-typography">
    <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
      <input type="text" class="mdc-text-field__input" id="demo-input">
      <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
    </div>
    <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>

  5. {: .step-list-item } ### What's next?

{: .step-list }