use*_*863 2 html javascript material-design mdc-components material-components-web
我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 轮廓文本字段（带有前导图标）。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
您确实需要阅读 mdc-textfield 中的文档。除了您将在下面看到的 html 修复之外，请务必注意实例化文本字段组件的 JavaScript（这通常是人们尝试开始时绊倒的原因）。您也可以使用mdc.autoInit()带有data-mdc-auto-init标记实例MDC组件（见自动初始化文件的详细信息）。
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>