如何在非 Node.js 应用程序中包含 Material.io 轮廓文本字段

Question

我在非 Node.js 应用程序中使用 Material 设计。我需要在我的 HTML 项目中使用 Material outlined textfield (with leading icon)。 Material.io 网站显示 JavaScript 某些组件的代码，但不显示其他组件的代码。如何在我的 HTML 项目中添加带轮廓的文本字段组件？

下面是我的代码：

<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 此代码：jsfiddle

Answer 1

MDL 文档本身有关于如何仅使用标准 <link> 和 <script> 标签来包含组件的资源。

文档： https://material.io/develop/web/docs/getting-started/

Answer 2

您确实需要阅读 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 中的文档以了解详细信息。

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>

如何在非 Node.js 应用程序中包含 Material.io 轮廓文本字段

How to include Material.io outlined textfield in non-Node.js app

html

javascript

material-design

mdc-components

material-components-web