在前端开发过程中，我们常常需要使用一些 UI 组件来提升用户体验。而 Material Design 是一种流行的设计风格，为了便于开发者使用，Google 新推出了一系列 Material 组件库。本文将介绍其中的一个 npm 包 @material/notched-outline 的使用教程。
1. 安装
在使用 @material/notched-outline 之前，我们需要先安装官方提供的组件库 @material/theme 和 @material/notched-outline，可以通过以下命令安装：
npm install @material/theme npm install @material/notched-outline
2. 引入
安装成功后，我们需要在项目中引入这两个包：
import '@material/notched-outline/dist/mdc.notchedOutline.css';
import {MDCNotchedOutline} from '@material/notched-outline';3. 使用
3.1 HTML
组件的 HTML 结构和普通的 input 元素一样：
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="text-field" class="mdc-floating-label">Your Label</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
<input type="text" id="text-field" class="mdc-text-field__input">需要注意的是，在 div.mdc-notched-outline 中，div.mdc-notched-outline__notch 必须包含一个带有 for 属性的 label，这样输入框才能和 label 进行关联。
3.2 JavaScript
创建 MDCNotchedOutline 实例，然后初始化：
const notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
notchedOutline.init();初始化之后，就可以通过 activate() 和 deactivate() 方法激活和禁用样式了：
notchedOutline.activate(); notchedOutline.deactivate();
4. 示例
组件的基本使用方法只需要按照上面的步骤即可，但如果想要进一步定制样式，也可以通过修改 CSS 文件来实现。以下是一个简单的示例：
-- -------------------- ---- -------
---- ----------------------------
---- -------------------------------------------
---- -----------------------------------
------ ---------------- ------------------------------- -------------
------
---- --------------------------------------------
------
------ ----------- --------------- ------------------------------
-------
------------------------------
------------------------------ -
------- -----
----------------- -----
-
--------------------------- -
------------- ------
-
------------------- -
------ ----
-
--------在上述示例中，我们分别设置 div.mdc-notched-outline__leading 和 div.mdc-notched-outline__trailing 的高度为 40px，背景颜色为蓝色；设置 div.mdc-notched-outline__notch 的边框颜色为绿色；设置 label.mdc-floating-label 的颜色为红色。
5. 总结
@material/notched-outline 是一个提供了 Material Design 风格的带有浮动标签的输入框的 npm 包。通过本文的介绍，我们可以了解到其基本的使用方法，以及如何对其样式进行个性化定制。如果你正在使用 Material Design 风格，不妨尝试使用这个组件，让你的 Web 应用更加美观和易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200677