LuLu UI Edge版中文文档 » 弹性网格列表
文档 Github➹

既定布局

安装与调用

本主题中的布局效果支持单独引用，示意：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Layout/index.css">

弹性网格列表

多行列表，宽度弹性，适配 iPad 、折叠屏，基准宽度使用 CSS 自定义属性设置（可拉伸右下角的拖拽条体验尺寸和布局变化）。

1 2 3 4 5 6

HTML 结构如下：

<ui-grid repeat></ui-grid>

此时，<ui-grid> 元素的子项就会自动变成具有弹性尺寸的列表，其中 repeat 属性是必须的，如果没有，则是普通的垂直列表布局。

我们也可以使用类名 .ui-grid 实现一致的效果，如下所示：

<ul class="ui-grid" data-repeat="true"></ul>

间隙和尺寸设置

间隙和尺寸均是使用 CSS 自定义属性进行设置。

其中，间隙设置的变量名是 --ui-gap，列表基准宽度尺寸设置的变量名是 --ui-repeat-size，还支持一个用来表示子项内间距的名为 --ui-space 的变量名。

各变量参数具体含义如下表所示：

变量名 默认值 释义
--ui-gap 0 表示列表项之间的间隙大小。
--ui-repeat-size 6rem 表示列表项最小基准尺寸。
--ui-space 0 表示每个子项的内间距尺寸，多用于子项是交互元素的时候。

示意：

<ui-grid repeat style="--ui-gap: 1rem"></ui-grid>

表示列表项的间隙大小是 1rem。

<ui-grid repeat style="--ui-repeat-size: 8rem"></ui-grid>

表示列表项的基准宽度（可以理解为在弹框尺寸变化中的最小宽度）大小是 8rem。

大家可以使用下面的滑竿体验不同间隙和不同基准宽度对布局效果的影响：

范围 0-4rem，当前值 1rem
范围 3-10rem，当前值 6rem
1 2 3 4 5 6

自定义组件模式

如果引入了对应的组件 JS，则我们还可以使用自定义属性设置列表的间隙、尺寸和内间距。

JS 引用示意：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Layout/index.js"></script>

或者：

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Layout/index.js";
</script>

此时就可以使用 gap、size 以及 space 等自定义 HTML 属性进行布局设置，代码会清爽很多。

例如：

<ui-grid repeat gap="0" size="6" space="0.5"></ui-grid>

其中：

变量名 默认值 释义
gap 0 表示列表项之间的间隙大小，支持任意数值单位，如果是纯数值，则认为是 rem 值。
size 6rem 表示列表项最小基准尺寸，默认单位是 rem。
space 0 表示每个子项的内间距尺寸，多用于子项是交互元素的时候，在撑开间隙同时不会影响点击区域的大小，默认单位是 rem。

大家可以试试下面不同属性值下的布局效果：
1 2 3 4 5 
<ui-grid repeat gap="0" size="6" space="0.5">
    <a href="##">
        <aspect-ratio>1</aspect-ratio>
    </a>
    <a href="##">
        <aspect-ratio>2</aspect-ratio>
    </a>
    ...
</ui-grid>

实践与深入

下面通过两个案例演示下什么时候应该使用 --ui-gap，什么时候应该使用 --ui-space。

  • 如果列表项是纯展示，则优先使用 CSS --ui-gap 自定义属性或者 HTML gap 属性。
  • 如果列表项是交互项，则：
    • 如果点击区域范围没有明显的视觉区分，使用 --ui-space；
    • 如果点击区域范围有明确的视觉表现，则使用 --ui-gap。

以下案例源自实际项目开发。

先看下使用 --ui-space 的案例，为了点击区域规整且足够大，使用了内间距进行间隙排版。

如果是桌面浏览器，可以拖拽右下角的拉伸条体验不同尺寸下的布局效果

夜的命名术
夜的命名术

会说话的肘子

 我，君麻吕，要长生！
我，君麻吕，要长生！

墨渊九砚

 大奉打更人. 排名top4
大奉打更人

卖报小郎君

 明克街13号. 排名top5
明克街13号

纯洁的小龙

 不科学御兽. 排名top6
不科学御兽

轻泉流响

 大魏读书人. 排名top2
大魏读书人

七月未时

 
<ui-grid repeat space="0.5"></ui-grid>
ui-grid {
    padding-left: .5rem;
    padding-right: .5rem; 
}

下面这个点击区域通过视觉限制，则可以使用 --ui-gap 进行间隙设置。

古代言情 81,123册
现代言情 84,359册
玄幻言情 30,580册
仙侠奇缘 12,963册
浪漫青春 33,130册
游戏竞技 3,409册
科幻空间 17,376册
轻小说 5,955册 
<ui-grid repeat gap="1" size="7">
    <a href="##" class="catalog"></a>
    <a href="##" class="catalog"></a>
    <a href="##" class="catalog"></a>
    ...
</ui-grid>
.catalog {
    display: flex;
    flex-direction: row-reverse;
    border-radius: .75rem;
    background-color: #eee;
    padding: .5rem .75rem;
    font-size: 87.5%;
    justify-content: space-between;
}

此时，点击空白间隙是穿透的，点击反馈只会出现在有灰色背景色的区域。

弹性表单列表

此列表布局适合左侧内容不固定，但是左侧内容的宽度要保持一致的场景，典型的使用场景就是表单布局（点击左侧任意列表项，可以看到布局变化）。

用户名 输入区域 昵称 输入区域 联系电话 输入区域

使用方法如下，使用自定义属性 form。

<ui-grid form></ui-grid>

也支持普通 HTML 元素，方法是添加类名 .ui-grid 和使用 HTML 属性 data-form。

<ul class="ui-grid" data-form="true"></ul>

实践与深入

下面的实践效果需要 Input 输入框样式配合，分隔线使用的是 Hr 分隔线实现。

 
<ui-grid gap="0.5" form>
    <label for="inn">昵称</label>
    <input id="inn" is="ui-input" border="none" placeholder="昵称">
    <hr>
    <label for="ie">邮箱</label>
    <input id="ie" type="email" is="ui-input" border="none" placeholder="邮箱">
    <hr>
    <label for="it">手机号码</label>
    <input id="it" type="tel" is="ui-input" border="none" placeholder="手机号码">
</ui-grid>

基础列表

先看下静态的列表结构效果示意：

列表1 列表2 列表3

HTML 代码如下所示：

<ui-list>
    <ui-list-item space>列表1</ui-list-item>
    <ui-list-item space>列表2</ui-list-item>
    <ui-list-item space>列表3</ui-list-item>
</ui-list>

也可以使用原生的 HTML 标签和类名 .ui-list 和 .ui-list-liem 实现一致的效果。

<ul class="ui-list">
    <li class="ui-list-item">列表1</li>
    <li class="ui-list-item">列表2</li>
    <li class="ui-list-item">列表3</li>
</ul>

其中，容器元素 <ui-list> 不是必须的，例如如下所示的列表效果。

明克街13号

明克街13号

我喜欢坐在夜晚空无一人的大街上，听着“他们”的窃窃私语，享受着“他们”的喧嚣。

作者：纯洁滴小龙
都市连载中87.4万字
 直播：我能看见过去与未来

直播：我能看见过去与未来

沈飞穿越平行世界，绑定了直播系统。能让他在直播的时候，看到连麦水友的过去与未来。并且将他们未来往好的方向引导，就能获得奖励。刚开播，沈飞便说哭了一位女主播，让她从此发愤图强，积极向上。一次，有一逃犯来到直播间与沈飞连麦。沈飞：“我拷，刑啊，大哥你早点自首吧，或许还能少判几年。”才刚讲，视频那头的逃犯就被当场抓获。结果，全国网友都震惊了。

作者：吟诗摇人
都市连载中60.54万字
 宇宙职业选手

宇宙职业选手

2036年，人类第一次登上了荧火星。2052年，第一届世界武道大赛举行，这也是全球最高格斗赛事，全球为之狂热。世界级顶尖选手“枪魔”许景明，于二十六岁那年，带着征战赛事留下的一身伤病，选择了退役……一个风起云涌的新时代，开始了！

作者：我吃西红柿
科幻连载中26.86万字

HTML 代码结构如下所示：

<div style="--ui-space: 1rem;">
    <a href class="ui-list-item">...</a>
    <a href class="ui-list-item">...</a>
    <a href class="ui-list-item">...</a>
</div>

选择列表

选择列表指的是和单复选框选择组合的列表元素，支持使用自定义 HTML 元素和普通 HTML 元素。

例如下面的列表选择效果：

列表1 列表2 列表3 
<ui-list-item space><input type="radio" name="r0" checked>列表1</ui-list-item>
<ui-list-item space><input type="radio" name="r0" disabled>列表2</ui-list-item>
<ui-list-item space><input type="radio" name="r0">列表3</ui-list-item>

多选样式：

列表1 列表2 列表3 
<ui-list-item space><input type="checkbox" name="c0" checked>列表1</ui-list-item>
<ui-list-item space><input type="checkbox" name="c0" disabled>列表2</ui-list-item>
<ui-list-item space><input type="checkbox" name="c0">列表3</ui-list-item>

位置设置

如果希望单选和复选控件在列表的前面显示，通过设置 reverse 属性实现，代码示意：

<ui-list-item reverse space><input type="checkbox">列表</ui-list-item>
列表

资源设置

如果希望使用自定义的选择样式，请使用 CSS 自定义属性 --ui-radio-default/ --ui-radio-checked（单选） 和 --ui-checkbox-default/ --ui-checkbox-checked（多选）实现。

CSS 自定义属性可以设置在任意的祖先元素上。

下面是一个实时可操作的演示页面，大家可以输入对应的 SVG 或者 PNG 格式的小图标地址（支持 Base64 格式），体验对应的效果。

--ui-image-default:

url()

--ui-image-checked:

url()

示意地址：

https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/1ccfd82f.svg

https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/d22b1d90.svg
列表1 列表2 列表3 
<form class="ui-list" style="
    --ui-image-default:url(https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/1ccfd82f.svg);
    --ui-image-checked:url(https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/d22b1d90.svg)"
>
    <ui-list-item space><input type="checkbox" name="c1" checked>列表1</ui-list-item>
    <ui-list-item space><input type="checkbox" name="c1">列表2</ui-list-item>
    <ui-list-item space><input type="checkbox" name="c1">列表3</ui-list-item>
</form>

语法示意：

<form style="--ui-radio-default:url(默认地址); --ui-radio-checked:url(选中地址)">
    <ui-list-item><input type="radio">列表1</ui-list-item>
    <ui-list-item><input type="radio">列表2</ui-list-item>
</form>

其中，默认地址可以是空字符串，表示默认无图形，例如下面的效果：

列表1 列表2 列表3 
<form style="--ui-radio-default:url(''); --ui-radio-checked:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTM0Ni41OTUgNjg0LjQ5NmwtMjEwLjgyLTIxMC44Mi03MS40OTIgNzEuNDQ2IDI4Mi4zMTIgMjgyLjI3IDYwNi40MDYtNjA2LjM1OS03MS40NDctNzEuNDkyLTUzNC45NTkgNTM0Ljk1NXoiLz48L3N2Zz4=)">
    <ui-list-item space><input type="radio" name="r1" checked>列表1</ui-list-item>
    <ui-list-item space><input type="radio" name="r1">列表2</ui-list-item>
    <ui-list-item space><input type="radio" name="r1">列表3</ui-list-item>
</form>

Web 组件模式

如果引入了与布局组件相关的 JS 资源，例如：

如果使用自定义元素，需要引入对应的 JS 资源：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Layout/index.js"></script>

或者：

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Layout/index.js";
</script>

则应用的 HTML 代码结构可以进一步简化，例如：

<form class="ui-list">
    <ui-list-item type="radio" name="r2" checked space>列表1</ui-list-item>
    <ui-list-item type="radio" name="r2" disabled space>列表2</ui-list-item>
    <ui-list-item type="radio" name="r2" space>列表3</ui-list-item>
</form>
列表1 列表2 列表3

此时，可以直接使用 <ui-list-item> 元素对象获取单复选框的 checked 状态或者 value 值等属性。

普通 HTML 元素模式

支持使用传统 HTML 元素实现旋转列表效果，为了保证整体点击效果，列表元素需要使用 <label> 元素，并且单复选框元素需要使用 LuLu UI 内置的 is 语法。

因此，需要先引入对应的 CSS 文件。如果是单选列表：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Radio/index.css">

如果是多选列表：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Checkbox/index.css">
<label class="ui-list-item" space>
    <input type="radio" is="ui-radio" name="r2">列表项1
</label>
<label class="ui-list-item" space>
    <input type="radio" is="ui-radio" name="r2">列表项2
</label>
<label class="ui-list-item" space>
    <input type="radio" is="ui-radio" name="r2">列表项3
</label>

如果希望单选框或复选项在文字内容的前面，可以在 <label>元素上设置 reverse 属性：

<label class="ui-list-item" reverse space>
    <input type="checkbox" is="ui-radio" name="r2">列表项1
</label>
<label class="ui-list-item" reverse space>
    <input type="checkbox" is="ui-radio" name="r2">列表项2
</label>
本页贡献者：

zhangxinxu