npm 包 @authentic/mwc-list 使用教程-JavaScript中文网-JavaScript教程资源分享门户

欢迎来到本文，本文将为您介绍一个非常实用的前端工具——npm包@authentic/mwc-list，帮助您了解包的使用教程，并提供示例代码方便您学习。

什么是@authentic/mwc-list?

@authentic/mwc-list是一个基于 Material Design2 的 web 组件库的列表库，可用于构建 Material Design2 风格的网站。它提供了丰富多样的常见列表选项，如单选列表、多选列表、平面列表以及嵌套列表。

安装

使用npm安装包。

npm install @authentic/mwc-list

引入

在您的项目中引入@authentic/mwc-list，有两种方法可以完成它：

方法 1：使用ES6模块语法

将@authentic/mwc-list引入到您的JS文件中：

import '@authentic/mwc-list';

方法 2：使用标记

通过标记引入@authentic/mwc-list库：

<head>
  <script src="https://cdn.jsdelivr.net/npm/@authentic/mwc-list@1.0.0/dist/mwc-list.js"></script>
</head>

组件

@authentic/mwc-list库提供了四种类型的列表选项：

选择项
分割线
平面项
嵌套项

选择项（mwc-list-item）

选择项是最常见的列表选项类型之一，并支持以下属性：

value(string) : 该项的值，默认值为空白字符串
selected(boolean) : 指定该项是否被选中，默认值为 false
activated(boolean) : 指定是否激活该项样式，默认值为 false

<mwc-list-item value="1" selected>选项 1</mwc-list-item>
<mwc-list-item value="2">选项 2</mwc-list-item>
<mwc-list-item value="3">选项 3</mwc-list-item>

分割线（mwc-list-divider）

分割线是用来组织列表的元素类型之一，可用它来将列表分隔开来。

<mwc-list-divider></mwc-list-divider>

平面项（mwc-list-item-flat）

平面列表的每个子项都有一个固定的图标，并通过高亮显示指示所选项。平面项仅支持两个属性：

icon(string) : 图标名称
text(string) : 展示项的文本内容

<mwc-list-item-flat icon="edit" text="编辑"></mwc-list-item-flat>
<mwc-list-item-flat icon="delete" text="删除"></mwc-list-item-flat>
<mwc-list-item-flat icon="print" text="打印"></mwc-list-item-flat>

嵌套项（mwc-list-item-nested）

嵌套项可用于嵌套列表和详细信息。

-- -------------------- ---- -------
----------------------
  ----- --------------------------
  ----- ----------------------------
  --------- --------------
    -------------- ------------ -----------------
    -------------- ------------ -----------------
    -------------- ------------ -----------------
  -----------
-----------------------

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    --------------------------------------
    ---- -- -------------------- ---
    ------- ---------------------------------------------------------------------------------------
  -------
  ------
    ---- ----- ---
    -------------- --------- ----------- -----------------
    -------------- ------------ -----------------
    -------------- ------------ -----------------

    ---- ----- ---
    -------------------------------------

    ---- ----- ---
    ------------------- ----------- -------------------------------
    ------------------- ------------- -------------------------------
    ------------------- ------------ -------------------------------

    ---- ----- ---
    ----------------------
      ----- --------------------------
      ----- ----------------------------
      --------- --------------
        -------------- ------------ -----------------
        -------------- ------------ -----------------
        -------------- ------------ -----------------
      -----------
    -----------------------
  -------
-------

结论

本文介绍了@authentic/mwc-list包，它提供了一组 Material Design2 风格的列表，可用于构建美观的 web 应用。您可以从npmjs.com获取下载包并阅读详细的教程提供了一些有深度的示例来帮助您更深入地了解使用这些组件的方法。如果您需要 Material Design2 风格的列表，请尝试使用@authentic/mwc-list库，您会受益匪浅。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/111821