欧共体 布局包装器
npm 软件包 : @ecl/layout-wrapper
npm install --save @ecl/layout-wrapper
参数
- "nb 栏" (int)(默认:3):项目栏数(2、3或4)
- "强制 栏目" (boolean) (默认:虚假): 如果选中的话, 桌面上的列将始终使用固定的编号, 而不是动态地适应容器; 谨慎使用
- “ 信息位置” (字符串)(默认:"top"): 标题/说明块的位置。 可能的选项:
- 上: 总是在网格上方堆叠
- 边: 在更宽的断点旁边的网格; 封入到3列
- "标题" (对象)(默认: ): 布局包装器的标题
- "级别" (int)(默认: 2): 标题级别,最高为h4
- “ 标签”( 字符串)( 默认 : '' ): 标题内容
- "描述" (字符串)(默认为:""): 对布局包装的描述
- “项目” (阵列)(默认:[ ]): 在包装中显示的项目.
每个项目可以是:
- a 字符串( 已放弃)
- 具有定义组件密钥的对象,例如{卡:{...}}} 支持的组件密钥: 名片、 导航 列表、 内容 项、 文件、 列表 lustration
- "指导" (字符串)(默认:"水平"): 物品的流动;可以是"横向"或"垂直"
- "潜水" (boolean) (默认:虚假): 显示行之间的分隔符
- "全览" (对象)(默认: ): 网格下方的链接显示; 遵循ECL 链接结构
- "全高"(满分) (boolean) (默认:真实): 在布局包装器的元素 需要全高
- "超级" (字符串)(默认:"")
- “外部属性” (阵列) (默认: []):格式: [ { “名称”(字符串)(默认:`'), "值"(可选) (字符串) {\fn华文楷体\fs16\1cHE0E0E0}, . [,
示例
{% include '@ecl/layout-wrapper/layout-wrapper.html.twig' with {
title: {
level: 2,
label: 'Heading',
},
description: 'Description',
items: [
card: {
// Card content, following the component structure
...
},
navigation_list: {
// Navigation list content, following the component structure
...
},
],
view_all: {
link: {
path: '#',
label: 'View all',
},
},
} %}
如何运作
使用布局包装 CSS 集装箱查询 来根据自己的可用宽度而不是取景口来调整其列数。 这意味着无论是将全宽放入还是放在更窄的上下文(如侧边栏布局)内,它都会正确响应.
外边 .ecl-layout-wrapper 要素确定容器上下文(container-type: inline-size) (中文(简体) ). 内在 .ecl-layout-wrapper__grid 元素具有实际的 CSS 网格,并被容器查询所命名.
列断点 (单位:千美元)col-x 变体 :
| 容器宽度 | col-2 | col-3 | col-4 |
|---|---|---|---|
| 默认 | 1 科尔 | 1 科尔 | 1 科尔 |
> m | 2个相机 | 2个相机 | 2个相机 |
> l | —— 说 | 3 个 cols | 3 个 cols |
> xl | —— 说 | —— 说 | 4 科尔 |
突出显示变体 (单位:千美元)highlight-col-x)将第一个项目(通常是标题)放入剩余项目的子网格左边。 在较小的面积下,两节垂直堆放.
| 容器宽度 | highlight-col-2 | highlight-col-3 |
|---|---|---|
| 默认 | 堆叠 | 堆叠 |
> m | 堆叠, 内容 2 cols | 堆叠, 内容 2 cols |
> l | 突出显示 qq 2- col 内容 | 堆叠, 内容 3 cols |
> xl | —— 说 | 突出显示 qq 3- col 内容 |
垂直流动 (单位:千美元)direction="vertical")在移动到下行之前填入每个列内上下的项目,而不是默认的从左到右顺序:
horizontal (default) vertical
[ 1 ][ 2 ][ 3 ] [ 1 ][ 3 ][ 5 ]
[ 4 ][ 5 ][ 6 ] [ 2 ][ 4 ][ 6 ]
以 grid-auto-flow: column 和明确的 grid-template-rows,它告诉浏览器在被包到下列之前要填入多少行。 以下 > m (单列),垂直流无影响,项目堆放正常.
由于列计数在每个断点都会有变化,因此要求的行计数也会有变化——例如2个cols中的6个项目需要3行,但在3个cols中需要2行. CSS无法动态计算此值, 因此模板会预先计算出所有需要的值, 并将它们输出为单独的自定义属性(--ecl-layout-rows-2, (中文(简体) ), --ecl-layout-rows-3, (中文(简体) ), --ecl-layout-rows-4) (中文(简体) ). 每个容器查询断点然后引用与其活动列数相匹配的变量.