4

I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the outlined textfield component in my HTML project?

Below is my code: 

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

    </head>
    <body>
        <!--button class="mdc-button mdc-button--raised">Button</button-->
         

        <div class="mdc-text-field mdc-text-field--outlined">
            <input type="text" id="tf-outlined" class="mdc-text-field__input" />

            <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
            <div class="mdc-notched-outline">
                <svg>
                    <path class="mdc-notched-outline__path"></path>
                </svg>
            </div>
            <div class="mdc-notched-outline__idle"></div>
        </div>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </body>
</html>

A fiddle for this code: jsfiddle

benvc
  • 14,448
  • 4
  • 33
  • 54
user9850863
  • 93
  • 1
  • 6

2 Answers2

8

You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField Quick Start</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
      <input type="text" class="mdc-text-field__input">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label">Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
    </label>
  </body>
</html>
benvc
  • 14,448
  • 4
  • 33
  • 54
  • 1
    This is the thing! – user9850863 Jun 29 '18 at 01:29
  • 1
    From where did you received that code ? I searched everywhere on material.io. – user9850863 Jun 29 '18 at 01:31
  • Go through the docs at the link in my answer and you will find various code snippets for different implementations of the mdc-textfield. Also, you can find the info on installing and getting started with the material components css and js libraries at https://github.com/material-components/material-components-web. – benvc Jun 29 '18 at 01:35
  • The GitHub directory https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield does not have any HTML file so,I got confused – user9850863 Jun 29 '18 at 01:40
  • I did not copy the html in my answer from any of the docs or source files there. I just put it together for you. That said, if you look at the readme there, you will find links to instructions on how to get started with material components. In addition, if you click on the "packages" directory, you will find a directory for each of the material components. Each one of those directories has a readme that contains example code snippets for the html and js associated with that particular component. – benvc Jun 29 '18 at 01:45
0

The MDL Docs themselves have resources on how to include the components just using the standard <link> and <script> tags.

Docs: https://material.io/develop/web/docs/getting-started/

User81646
  • 628
  • 4
  • 13