FastFoodCoding

Login


Connect with one of the following accounts





Login

Please wait while we redirect...

Views: 1620   



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/[email protected]/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>
    <p class="mdc-typography--body1">More examples available @  <a href="https://fastfoodcoding.com/tags/mdc-web">https://fastfoodcoding.com/tags/mdc-web</a></p>

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

Demo




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>



On By