什么是 @material/list
@material/list 是 Material Design 风格的列表组件。它使用了 Material Design 规范中的 List 来组成列表，在其中，每一项都是可交互的。无论你是在构建一个复杂的应用程序，还是一个简单的前端页面，@material/list 是一个很好的选择。
安装与引入
安装
@material/list 是一个由 Google 开发并保存在 npm 上的开源软件包。要在项目中使用它，可以使用 npm 进行安装，命令如下：
--- ------- --------------
引入
在项目中，引入 @material/list 可以使用以下代码：
------ --------- ---- ----------------- -- ------------- ----- ---- - --- ---------------------------------------------
或者，在 HTML 中使用以下代码：
--- --------------- --------------------
--- ----------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
--- -------------------- -------------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
--- ----------------------
----- ----------------------------
----- ---------------------------------------- --------
----- ----------------------------------------------- -----------
-------
-----
-----示例
基本使用
为了开始使用 @material/list，需要创建一个 HTML 元素，该元素具有 mdc-list 类。您可以使用以下代码：
--- ----------------- --- -------------------------- ------ --- -------------------------- ------ --- -------------------------- ------ -----
此外，也可以在 JavaScript 中实例化列表，并设置 MDCList 类：
------ --------- ---- ----------------- ----- ---- - --- ---------------------------------------------
含有图标和文本
为了提高可读性，@material/list 允许您在列表项中使用图标和文本。图标通常用作辅助信息，以增加列表项的可读性和清晰度。您可以使用以下代码：
--- -----------------
--- ----------------------
-- --------------------- ----------------------- ----------------------------
----- ----------------------------------------
-----
--- ----------------------
-- --------------------- ----------------------- ---------------------------
----- ---------------------------------------
-----
--- ----------------------
-- --------------------- ----------------------- ---------------------------
----- -------------------------------- -----------
-----
-----交互式选项
与许多列表组件类似，@material/list 支持可选的项目。这使您可以交互地使用您的列表，例如为用户提供一个选项，当用户选择该选项时，会发生某些操作。您可以使用以下代码：
--- ----------------- --- --------------------- ----------------- -------- --- --------------------- ----------------- -------- --- --------------------- ----------------- ---------- -----
在 JavaScript 中选择列表项：
------ --------- ---- ----------------- ----- ---- - --- --------------------------------------------- --------------------- ---------- -- - ----------------- ---- ----- --------------- --- ---- ------------- ---
以上是 @material/list 的基础使用方法。通过了解它的组成部分并按照相应的方法进行设置，您可以创建一个美观，交互性强，可读性强的列表组件，使您的网站或应用程序更加的具有吸引力和实用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/200775