什么是 @material/list
@material/list 是 Material Design 风格的列表组件。它使用了 Material Design 规范中的 List 来组成列表，在其中，每一项都是可交互的。无论你是在构建一个复杂的应用程序，还是一个简单的前端页面，@material/list 是一个很好的选择。
安装与引入
安装
@material/list 是一个由 Google 开发并保存在 npm 上的开源软件包。要在项目中使用它，可以使用 npm 进行安装，命令如下：
npm install @material/list
引入
在项目中，引入 @material/list 可以使用以下代码：
import {MDCList} from '@material/list';
// Instantiation
const list = new MDCList(document.querySelector('.mdc-list'));或者，在 HTML 中使用以下代码：
-- -------------------- ---- -------
--- --------------- --------------------
--- ----------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
--- -------------------- -------------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
--- ----------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
-----示例
基本使用
为了开始使用 @material/list，需要创建一个 HTML 元素，该元素具有 mdc-list 类。您可以使用以下代码：
<ul class="mdc-list"> <li class="mdc-list-item">Item 1</li> <li class="mdc-list-item">Item 2</li> <li class="mdc-list-item">Item 3</li> </ul>
此外，也可以在 JavaScript 中实例化列表，并设置 MDCList 类：
import {MDCList} from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));含有图标和文本
为了提高可读性，@material/list 允许您在列表项中使用图标和文本。图标通常用作辅助信息，以增加列表项的可读性和清晰度。您可以使用以下代码：
-- -------------------- ---- -------
--- -----------------
--- ----------------------
-- --------------------- ----------------------- ----------------------------
----- ----------------------------------------
-----
--- ----------------------
-- --------------------- ----------------------- ---------------------------
----- ---------------------------------------
-----
--- ----------------------
-- --------------------- ----------------------- ---------------------------
----- -------------------------------- -----------
-----
-----交互式选项
与许多列表组件类似，@material/list 支持可选的项目。这使您可以交互地使用您的列表，例如为用户提供一个选项，当用户选择该选项时，会发生某些操作。您可以使用以下代码：
<ul class="mdc-list"> <li class="mdc-list-item" tabindex="0">Item One</li> <li class="mdc-list-item" tabindex="0">Item Two</li> <li class="mdc-list-item" tabindex="0">Item Three</li> </ul>
在 JavaScript 中选择列表项：
import {MDCList} from '@material/list';
const list = new MDCList(document.querySelector('.mdc-list'));
list.listen('action', ({detail}) => {
console.log(`Item with index ${detail.index} has been activated.`);
});以上是 @material/list 的基础使用方法。通过了解它的组成部分并按照相应的方法进行设置，您可以创建一个美观，交互性强，可读性强的列表组件，使您的网站或应用程序更加的具有吸引力和实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200775