Question

我在非Node.js应用程序中使用了Material Design。我需要在HTML项目中使用Material outlined textfield (with leading icon)。 Material.io网站显示某些组件的JavaScript代码，但不显示其他组件的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>

此代码的小提琴：jsfiddle

Answer 1

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

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

Answer 2

由于可能很难找出如何使用Material Components的方法，因此我将为您提供最简单的轮廓文本字段（带有正在寻找的前导图标）的帮助（本示例使用浮动标签，单击效果的文本字段）。您确实需要阅读mdc-textfield上的文档。除了将在下面看到的html修复程序之外，请确保注意最后一个实例化textfield的MDC javascript的脚本标签（这通常是人们在尝试入门时会绊倒的地方）。您还可以使用带有mdc.autoInit()标记的data-mdc-auto-init实例化MDC组件（有关详细信息，请参见Auto Init docs）。

<!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 rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">   
  </head>

  <body>
  
    <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
      <input type="text" id="field-id" class="mdc-text-field__input">
      <label for="field-id" class="mdc-floating-label">Label</label>
      <div class="mdc-notched-outline">
        <svg>
          <path class="mdc-notched-outline__path"/>
        </svg>
      </div>
      <div class="mdc-notched-outline__idle"></div>
    </div>
    
    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
    <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
    
  </body>
</html>

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

2 个答案: