Getting started with Material Components for the Web (MDC-Web)

2299

Material Components for the Web (MDC-Web) is a Material Design implementation by Google. Its a successor to Material Design Lite (MDL). Google deprecated Material Design Lite (MDL) in the favour of Material Components for the Web (MDC-Web).

Material Components for the Web (MDC-Web) is part of Material Components where google trying to provide components for all different environments like Web and Mobile phones. This tutorial shows you a Hello World on Material Components for the Web (MDC-Web).

Lets get started, First create a html page in your favourite editor and copy paste the following content

index.html

<html>
  <head>
    <title>Material Components for the web Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  </head>

  <body class="mdc-typography">
    <h2 class="mdc-typography--display2">Hello World! Sample Title</h2>
    <p class="mdc-typography--body1">Its a paragraph with some text. Below you will see a sample form.</p>
    <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">Name</label>
    </div>
    <br>
    <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">EmailId</label>
    </div>
    <br><br>
    <button class="mdc-button mdc-button--raised">
      Save
    </button>
    <br><br><br>
    <hr>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>

Demo

<iframe height='460' scrolling='no' title='Material Components for the web Demo' src='//codepen.io/fastfoodcoding/embed/VxMpKN/?height=486&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/fastfoodcoding/pen/VxMpKN/'>Material Components for the web Demo</a> by fastfoodcoding (<a href='https://codepen.io/fastfoodcoding'>@fastfoodcoding</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <br> Note: In the example we are using CDN links for the Material Components for the Web (MDC-Web), You can alternatively download them to your local by running `npm install material-components-web`. If you do this you can refer the resource file from your local like following 
<link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css">
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>