简介
@material/grid-list 是 Material Design 标准下的网格列表组件。它提供了一种可定制化的方式展示图片和文本。使用 @material/grid-list 可以快速搭建出符合 Material Design 标准的网格列表。
安装
在使用 @material/grid-list 之前，需要先安装它。可以使用 npm 安装：
--- ------- -------------------
使用
初始化
首先，需要引入 @material/grid-list 组件并初始化：
------ - ----------- - ---- ---------------------- ----- -------- - --- ------------------------------------------------------ --------------------
这里新建了一个 MDCGridList 实例，并通过 activate() 方法激活了组件。
改变网格列表布局
@material/grid-list 支持以下三种布局：
固定列数布局
---- ----------------------
--- -----------------------------
--- ---------------------------
--- ---------------------------
--- ---------------------------
-----
------添加 class mdc-grid-list--tile-gutter-1 可以设置每个网格之间的间隔。在 CSS 样式中通过修改 grid-template-columns 属性的值可以改变网格每行的列数。
-------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------------------------------- -------------- - --------------- ----- -
固定行数布局
---- -------------------- ---------------------------------
--- -----------------------------
--- ---------------------------
--- ---------------------------
--- ---------------------------
-----
------添加 class mdc-grid-list--tile-aspect-16x9 可以设置网格的宽高比。在 CSS 样式中通过修改 grid-template-rows 属性的值可以改变网格每列的行数。
-------------- - -------- ----- ------------------- --------- ----- --------- ----- - -------------------------------- -------------- - --------------- ------- -
可变列数/行数布局
---- -------------------- ----------------------------
--- -----------------------------
--- ---------------------------
--- ---------------------------
--- ---------------------------
-----
------添加 class mdc-grid-list--with-aspect 可以设置网格的宽高比。在 CSS 样式中通过 grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)); 可以设置为自动填充，初始列数为原有列数，每列最小宽度为 200px, 可以随窗口的宽度自适应变化列数。
-------------- - -------- ----- --------------- ---- --------- ----- ---------------------- ----------------- ------------- ------ - --------------------------- -------------- - --------------- ----- -
改变网格列表样式
动态项计数
Material Design 标准下的网格列表组件支持显示每项的大小和位置。如果要显示每个动态计数的圆形文本，请在列表项的 mdc-grid-tile__primary 元素中添加一个 mdc-grid-tile__primary-content 元素。然后在其上添加一个 mdc-grid-tile__secondary 元素。
--- -----------------------------
--- ----------------------
---- -------------------------------
---- ---------------------------------------------
----- -----------------------------------------
------
-----
--- ----------------------
---- -------------------------------
---- ---------------------------------------------
----- -----------------------------------------
------
-----
--- ----------------------
---- -------------------------------
---- ---------------------------------------------
----- -----------------------------------------
------
-----
-----背景颜色
使用 .mdc-grid-tile__primary 和 .mdc-grid-tile__secondary CSS 类来为每个子条目的背景添加颜色。
----------------------- - ----------------- -------- - ------------------------- - ----------------- -------- -
示例代码
---- ----------------------
--- -----------------------------
--- ----------------------
---- -------------------------------
---- --------------------------------------
---------------------------------------- -------
----- -----------------------------------------
------
-----
--- ----------------------
---- -------------------------------
---- --------------------------------------
---------------------------------------- -------
----- -----------------------------------------
------
-----
--- ----------------------
---- -------------------------------
---- --------------------------------------
---------------------------------------- -------
----- -----------------------------------------
------
-----
-----
-------------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------------------------------- -------------- - --------------- ----- - ----------------------- - ----------------- -------- - ------------------------- - ----------------- -------- -
总结
@material/grid-list 是一个功能强大的网格列表组件，可以轻松配置出符合 Material Design 标准的网格列表。本文主要介绍了如何使用该组件并如何改变网格列表布局和样式。希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/200769