简介
@material/grid-list 是 Material Design 标准下的网格列表组件。它提供了一种可定制化的方式展示图片和文本。使用 @material/grid-list 可以快速搭建出符合 Material Design 标准的网格列表。
安装
在使用 @material/grid-list 之前，需要先安装它。可以使用 npm 安装：
npm install @material/grid-list
使用
初始化
首先，需要引入 @material/grid-list 组件并初始化：
import { MDCGridList } from '@material/grid-list'; const gridList = new MDCGridList(document.querySelector('.mdc-grid-list')); gridList.activate();
这里新建了一个 MDCGridList 实例，并通过 activate() 方法激活了组件。
改变网格列表布局
@material/grid-list 支持以下三种布局：
固定列数布局
<div class="mdc-grid-list"> <ul class="mdc-grid-list__tiles"> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> </ul> </div>
添加 class mdc-grid-list--tile-gutter-1 可以设置每个网格之间的间隔。在 CSS 样式中通过修改 grid-template-columns 属性的值可以改变网格每行的列数。
-- -------------------- ---- ------- -------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------------------------------- -------------- - --------------- ----- -展开代码
固定行数布局
<div class="mdc-grid-list mdc-grid-list--tile-aspect-16x9"> <ul class="mdc-grid-list__tiles"> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> </ul> </div>
添加 class mdc-grid-list--tile-aspect-16x9 可以设置网格的宽高比。在 CSS 样式中通过修改 grid-template-rows 属性的值可以改变网格每列的行数。
-- -------------------- ---- ------- -------------- - -------- ----- ------------------- --------- ----- --------- ----- - -------------------------------- -------------- - --------------- ------- -展开代码
可变列数/行数布局
<div class="mdc-grid-list mdc-grid-list--with-aspect"> <ul class="mdc-grid-list__tiles"> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> <li class="mdc-grid-tile"></li> </ul> </div>
添加 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 类来为每个子条目的背景添加颜色。
.mdc-grid-tile__primary { background-color: #7743ce; } .mdc-grid-tile__secondary { background-color: #ffe732; }
示例代码
-- -------------------- ---- ------- ---- ---------------------- --- ----------------------------- --- ---------------------- ---- ------------------------------- ---- -------------------------------------- ---------------------------------------- ------- ----- ----------------------------------------- ------ ----- --- ---------------------- ---- ------------------------------- ---- -------------------------------------- ---------------------------------------- ------- ----- ----------------------------------------- ------ ----- --- ---------------------- ---- ------------------------------- ---- -------------------------------------- ---------------------------------------- ------- ----- ----------------------------------------- ------ ----- ----- ------展开代码
-- -------------------- ---- ------- -------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------------------------------- -------------- - --------------- ----- - ----------------------- - ----------------- -------- - ------------------------- - ----------------- -------- -展开代码
总结
@material/grid-list 是一个功能强大的网格列表组件，可以轻松配置出符合 Material Design 标准的网格列表。本文主要介绍了如何使用该组件并如何改变网格列表布局和样式。希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200769
