daisyUI List 组件完全指南用 list 与 list-row 构建信息行式布局【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiList 是 daisyUI 提供的一种纵向信息行布局组件用于以“行”为单位整齐地展示歌曲、联系人、消息、设置项等数据。本文将以 List 组件官方文档/components/list/page.md) 为核心结合 list.css 源码 与仓库内技能文档 skills/daisyui/components/list.md完整讲解list、list-row两个组件类与list-col-grow、list-col-wrap两个修饰类并深入剖析其基于 CSS Grid 与:has()选择器的底层实现让你读完即可直接落地一套可运行的 List 界面。组件定位与核心类名总览daisyUI 官方对 List 的定位是A vertical layout to display information in rows一种以行展示信息的纵向布局。它适合承载由“多列数据 操作按钮”组成的重复型行条目例如音乐播放列表、通讯录、订单记录、消息列表等。根据文档 frontmatter 中的 classnames 定义List 组件包含 2 个组件类和 2 个修饰类类型类名作用组件list纵向 flex 布局容器用于包裹若干行条目组件list-row列表中的单个条目内部是横向网格布局用于承载数据修饰list-col-grow加在list-row的某个直接子元素上使其填充剩余空间修饰list-col-wrap加在list-row的某个直接子元素上将其推到下一行同时文档给出了一条关键默认行为说明By default, the second child of thelist-rowwill fill the remaining space. You can uselist-col-growon another child to make it fill the remaining space instead.即默认情况下list-row的第二个子元素会自动填充剩余空间若想让其他子元素来填充则把list-col-grow加到那个元素上。基础语法list list-rowList 的最小使用形态是一个ul classlist包裹若干个li classlist-rowul classlist li classlist-row{CONTENT}/li /ul官方技能文档 skills/daisyui/components/list.md 为此总结了两条使用规则列表中的每一项都要使用list-row默认由list-row的第二个子元素填充剩余空间若想换一个子元素来填充就给该子元素添加list-col-grow使用list-col-wrap可以将某个子元素移动到下一行。容器本身可以叠加任意 Tailwind 或 daisyUI 工具类。官方示例中最常见的组合是list bg-base-100 rounded-box shadow-md——bg-base-100使用主题基础色作为背景rounded-box提供主题圆角shadow-md添加投影三者叠加后即得到一张浮起的卡片式列表。场景一默认布局第二列自动填充官方文档的第一个示例是“本周播放最多的歌曲”列表。每行包含头像缩略图第一列、歌曲名与歌手信息第二列、播放与收藏两个操作按钮。由于默认规则是第二列填充剩余空间因此这里不需要添加任何修饰类ul classlist bg-base-100 rounded-box shadow-md li classp-4 pb-2 text-xs opacity-60 tracking-wideMost played songs this week/li li classlist-row divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/194.webp//div div divDio Lupa/div div classtext-xs uppercase font-semibold opacity-60Remaining Reason/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button button classbtn btn-square btn-ghost svg aria-labelFavorite classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z/path/g/svg /button /li li classlist-row divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/494.webp//div div divEllie Beilish/div div classtext-xs uppercase font-semibold opacity-60Bears of a fever/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button button classbtn btn-square btn-ghost svg aria-labelFavorite classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z/path/g/svg /button /li li classlist-row divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/394.webp//div div divSabrino Gardener/div div classtext-xs uppercase font-semibold opacity-60Cappuccino/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button button classbtn btn-square btn-ghost svg aria-labelFavorite classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z/path/g/svg /button /li /ul这里的实现细节值得注意列表第一个li没有使用list-row它只是纯文本的“分组标题”通过p-4 pb-2 text-xs opacity-60 tracking-wide与正文行区分开来行内头像使用size-10 rounded-box约束尺寸与圆角操作按钮直接复用 daisyUI 的btn btn-square btn-ghost说明list-row内部可以自由嵌套其他 daisyUI 组件。场景二list-col-grow —— 让指定列填充剩余空间默认规则是“第二列填充剩余空间”但通过list-col-grow可以把这个能力转移给任意一列。官方第二个示例在每行最前面增加了一列序号01 / 02 / 03然后把list-col-grow加到了第三列歌曲信息上使第三列成为弹性列头像与按钮则按内容宽度自然排布ul classlist bg-base-100 rounded-box shadow-md li classp-4 pb-2 text-xs opacity-60 tracking-wideMost played songs this week/li li classlist-row div classtext-4xl font-thin opacity-30 tabular-nums01/div divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/194.webp//div div classlist-col-grow divDio Lupa/div div classtext-xs uppercase font-semibold opacity-60Remaining Reason/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button /li li classlist-row div classtext-4xl font-thin opacity-30 tabular-nums02/div divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/494.webp//div div classlist-col-grow divEllie Beilish/div div classtext-xs uppercase font-semibold opacity-60Bears of a fever/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button /li li classlist-row div classtext-4xl font-thin opacity-30 tabular-nums03/div divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/394.webp//div div classlist-col-grow divSabrino Gardener/div div classtext-xs uppercase font-semibold opacity-60Cappuccino/div /div button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button /li /ul从 list.css 源码 可以看到list-col-grow的弹性行为并非写死在某个元素上而是通过:has()选择器按“该元素是list-row的第几个子元素”来动态调整整个行的网格模板.list-row { :has(.list-col-grow:nth-child(1)) { --list-grid-cols: 1fr; } :has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr; } :has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; } /* … 依次类推到第 6 个子元素 */ * { apply row-start-1; } }也就是说只要list-col-grow位于第 N 列daisyUI 就会把grid-template-columns中第 N 列设为1fr弹性列其余列保持minmax(0, auto)按内容自适应。源码共覆盖了第 1 到第 6 个子元素的情况足以应对绝大多数行内列数。所有子元素同时被设置为row-start-1保证它们默认都排列在第一行。场景三list-col-wrap —— 将某列推到下一行当行内需要展示大段说明文字如歌曲介绍、商品描述时把文字硬塞进同一行会挤压其他列。此时可以使用list-col-wrap将该元素移动到下一行让它在整个list-row的宽度下换行展开ul classlist bg-base-100 rounded-box shadow-md li classp-4 pb-2 text-xs opacity-60 tracking-wideMost played songs this week/li li classlist-row divimg classsize-10 rounded-box altTailwind CSS list item srchttps://img.daisyui.com/images/profile/demo/194.webp//div div divDio Lupa/div div classtext-xs uppercase font-semibold opacity-60Remaining Reason/div /div p classlist-col-wrap text-xs Remaining Reason became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupas most iconic tracks. /p button classbtn btn-square btn-ghost svg aria-labelPlay classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM6 3L20 12 6 21 6 3z/path/g/svg /button button classbtn btn-square btn-ghost svg aria-labelFavorite classsize-[1.2em] xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24g stroke-linejoinround stroke-linecapround stroke-width2 fillnone strokecurrentColorpath dM19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z/path/g/svg /button /li !-- 其余行结构相同替换为对应歌曲数据即可 -- /ul对应的实现同样非常简洁list.css 源码.list-col-wrap { layer daisyui.l1 { apply row-start-2; } }在 CSS Grid 中row-start-2将元素放到第二行的起点。结合上面list-row子元素默认row-start-1的规则带有list-col-wrap的列会独占整行剩余宽度并自然换行而其余列仍保持在第一行从而形成“第一行缩略图 标题 按钮第二行完整描述文字”的经典布局。源码级原理一个 Grid 驱动的行布局把三个场景串起来就能完整还原 packages/daisyui/src/components/list.css 的整套设计.list { layer daisyui.l1.l2.l3 { apply flex flex-col; font-size: 0.875rem; .list-row { --list-grid-cols: minmax(0, auto) 1fr; apply rounded-box relative grid grid-flow-col gap-4 p-4; word-break: break-word; grid-template-columns: var(--list-grid-cols); } /* …分隔线规则… */ } }几个关键点容器.list是flex flex-col的纵向弹性布局并统一把字号设置为0.875rem与文档示例中text-xs的体量一致保证行内文字节奏统一行条目.list-row是grid grid-flow-col的横向网格默认列模板--list-grid-cols: minmax(0, auto) 1fr——两列时恰好对应“第二列填充剩余空间”的默认行为gap-4 p-4控制列间距与内边距word-break: break-word防止长文本撑破网格分隔线.list-row之间默认有一条细分隔线它由 :not(:last-child)中的:after伪元素生成border-bottom: var(--border) solid、颜色为base-content/5主题内容色的 5% 透明度并用inset-inline: var(--radius-box)让线的左右端点与圆角对齐视觉上内嵌于卡片边缘主题变量分隔线宽度与圆角均来自主题变量。--border与--radius-box在 variables.css 中被声明为theme变量各主题文件如 abyss.css 中的--radius-box: 0.5rem、--border: 1pxacid.css 中的--radius-box: 1rem会在运行时注入具体值因此列表的分隔线与圆角会自动跟随主题切换。实用组合与注意事项与按钮组件联动。list-row内部可以直接放btn、badge、avatar等其他 daisyUI 组件官方示例中的播放/收藏按钮即使用了btn btn-square btn-ghost。操作列通常放在行尾利用默认“第二列填充”或list-col-grow将按钮稳定吸附在右侧。前缀prefix适配。本文示例代码中的类名统一写作list、list-row等若你的项目通过 daisyUI 插件的prefix配置启用了类名前缀则需相应替换为${prefix}list等写法如$$list形式。前缀的注入逻辑由 pluginOptionsHandler.js 中的prefix选项统一处理与所有 daisyUI 组件一致。列数上限。list-col-grow的:has()规则覆盖第 1 至第 6 列因此单行超过 6 列时弹性列行为需要自行用 Tailwind 的grid-cols-*工具类补充。换行文本与长内容。需要展示描述性长文本时优先使用list-col-wrap搭配text-xs等字号工具类而不是强行压缩在同一行word-break: break-word已为超长单词提供了兜底。结构语义。官方文档与示例均推荐ulli的语义化结构列表内的纯文本分组标题可以直接作为普通li存在不加list-row配合opacity-60 tracking-wide等工具类即可形成清晰的视觉分组。至此list/list-row/list-col-grow/list-col-wrap四者的职责已经清晰容器负责纵向排列行条目负责横向网格list-col-grow控制弹性列归属list-col-wrap控制换行。你可以直接复制上文任意一段完整 HTML 到项目中替换数据后即可得到一套开箱即用、随主题联动的信息行列表。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考