前言
在前端开发中，使用现成的工具和框架来提高开发效率和代码质量已经变得十分常见。其中，Material Design 是一套由 Google 推出的设计语言，在现代 Web 开发中被广泛应用。针对 Material Design， Google 也提供了一系列的开发工具和控件，包括 Material Components for the Web，开发者可以通过它们快速搭建具有 Material Design 风格的 Web 应用。
在 Material Components for the Web 中，@materialr/list 是列表控制的 npm 包，主要用于创建一些 Material Design 风格的列表或菜单。本文将详细介绍 @materialr/list npm 包的使用方法。
安装
@materialr/list 是一个 npm 包，因此要想使用它，需要先安装它。可以通过以下命令在项目中安装它：
npm install @materialr/list
安装成功后，即可在项目中引入它。
引入
在获得了 @materialr/list 的 npm 包之后，我们可以通过以下方式引入它：
import { List } from '@materialr/list';List 类将会成为我们调用 @materialr/list 功能的入口。
使用
基本列表
@materialr/list 可以用于创建一些 Material Design 风格的基本列表。以下是一个简单的示例代码：
-- -------------------- ---- -------
------
--- ---------------- -------------
--- -------------------------- ------
--- -------------------------- ------
--- -------------------------- ------
-----
--------
----- ------ - --- -----------------------------------------
--------------
---------
-------在这个示例中，我们将 ul 元素的 id 设置为 my-list，然后在 script 标签中创建 List 类的实例，并调用 init 方法来初始化该列表。在初始化后，我们的列表会以 Material Design 风格进行渲染。
列表内部结构
@materialr/list 遵从 Material Design 的规范，对于列表内部结构也有一些要求。以下是一个例子：
-- -------------------- ---- -------
--- ---------------- -------------
--- ----------------------
----- ------------------------------ --------------------
-- ---------------------------------------
-------
----- ----------------------------------------
----- -------------------------- --------------- ----------------------------------------------
-----
-----在这个示例中，整个列表是一个 ul 元素，并使用 mdc-list 类来指示该列表应该使用 Material Design 风格进行渲染。每个列表项是一个 li 元素，并使用 mdc-list-item 类指示该元素为一个列表项。在每个列表项中，存在以下三个子元素：
mdc-list-item__graphic- 列表项中显示的图形，例如 Material Icons 中的图标。mdc-list-item__text- 列表项中显示的文本，描述该项的信息。mdc-list-item__meta- 列表项右侧显示的元素，例如一个向右指示的小箭头。
这些子元素的顺序必须与上述顺序相同，还必须使用特定的类名。
列表项的选择
使用 $ele.getSelectedItem() 方法，可以获得当前列表选中的项。以下是一个示例代码：
const item = mylist.getSelectedItem();
在此示例中，mylist 是使用 List 类创建的实例。
结语
@materialr/list 是一个列表控件库，由 Material Components for the Web 提供支持。在这篇文章中，我们介绍了它的基本用法和一些内部结构，希望这些信息可以帮助你在你的 Web 项目中创建 Material Design 风格的列表。如果你对 @materialr/list 有更多的疑问和需求，可以查阅官方文档获得更多的信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446e4