daisyUI Timeline 组件完全指南从时间轴基础布局到响应式实战【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiTimeline时间线是 daisyUI 中用于按时间顺序展示事件列表的组件它用一条贯穿的连接线和图标节点把「事件时间」「事件描述」「过程图标」组织成清晰可读的序列。本文以 daisyUI 官方组件文档 Timeline 页面/components/timeline/page.md) 为主体结合组件源码 timeline.css 与文档站点的前缀渲染机制完整讲解 Timeline 的类名体系、水平/垂直布局、单侧/双侧内容排布、彩色连接线、响应式切换、图标吸顶与紧凑模式并深入源码揭示其基于 CSS Grid 的实现原理读完即可在真实项目中直接落地使用。Timeline 组件定位与类名体系Timeline 组件以ul作为容器每个li表示一个时间点事件。官方文档在其 frontmatter 中定义了完整的类名体系分为四类分类类名作用componenttimelineTimeline 容器挂在ul上parttimeline-startli内位于「起始方向」的内容水平布局中为上方垂直布局中为左侧parttimeline-middleli内位于「中间」的内容通常放图标parttimeline-endli内位于「结束方向」的内容水平布局中为下方垂直布局中为右侧modifiertimeline-snap-icon把图标吸附到起点而非中间modifiertimeline-box为timeline-start或timeline-end应用卡片盒样式modifiertimeline-compact强制所有条目位于同一侧directiontimeline-horizontal水平布局默认directiontimeline-vertical垂直布局其中timeline-horizontal是默认方向添加timeline-vertical类即可切换到垂直布局两者可响应式组合使用见下文。基础结构ul li 三区块与 hr 连接线Timeline 的最小骨架如下ul classtimeline li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li /ul官方文档特别强调了一条关键规则INFO 提示每个条目开头或结尾的hr标签用于显示连接相邻条目的线条。也就是说li内部的hr不是普通的水平分割线而是被 Timeline 组件当作「连接线」使用它占据网格中的连接列/行把前后两个事件的节点串起来。从源码看hr的默认样式是h-1水平方向 4px 高加上bg-base-300背景色timeline.css并且被取消了默认边框border: nonetimeline.css。水平时间线默认方向的五种排布默认情况下不写方向类flex默认为行方向Timeline 呈水平走向。官方文档给出了五种典型排布。双侧文字 图标这是最经典的形态上方放时间、中间放图标、下方放事件描述每个li之间用hr连接ul classtimeline li div classtimeline-start1984/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classh-5 w-5 path fill-ruleevenodd dM10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z clip-ruleevenodd / /svg /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classh-5 w-5 path fill-ruleevenodd dM10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z clip-ruleevenodd / /svg /div div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start2001/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxiPod/div hr / /li li hr / div classtimeline-start2007/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxiPhone/div hr / /li li hr / div classtimeline-start2015/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxApple Watch/div /li /ul注意观察hr的放置规律除了第一个li的开头以及最后一个li的结尾其余每个li的前后都各有一个hr——前一个hr承接上一节点后一个hr引出下一节点。最后一个li可以省略尾部hr第一条目也可以省略头部hr。这里timeline-end还叠加了timeline-box让描述文字带上卡片盒样式。仅下方bottom side only若只写timeline-middletimeline-end不写timeline-start事件内容会全部排在轴线的下方适合「时间不重要、只需事件流」的展示ul classtimeline li div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul仅上方top side only反过来只写timeline-starttimeline-middle内容全部排在上方ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li li hr / div classtimeline-start timeline-boxiMac/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li !-- 后续 li 结构相同 -- /ul左右交错different sides每个li独立决定内容放在上方还是下方即可实现上下交错的效果例如奇偶项交替适合需要视觉节奏感的场景ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start timeline-boxiPod/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li !-- 后续 li 按需交错 -- /ul彩色连接线colorful lines连接线本质是带bg-base-300的hr因此可以直接用 Tailwind 的颜色类覆盖它。给hr加bg-primary同时给图标加text-primary即可得到一条主色贯穿的强调式时间线ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classtext-primary h-5 w-5 !-- 对勾 path -- /svg /div hr classbg-primary / /li li hr classbg-primary / div classtimeline-middle !-- 图标 SVGtext-primary -- /div div classtimeline-end timeline-boxiMac/div hr classbg-primary / /li !-- 只对需要的线段加 bg-primary未强调的线段保持默认 -- /ul无图标without icons完全省略timeline-middle让时间线与卡片直接相连得到极简的纯文字时间线ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start timeline-boxiPod/div hr / /li li hr / div classtimeline-end timeline-boxiPhone/div hr / /li li hr / div classtimeline-start timeline-boxApple Watch/div /li /ul垂直时间线timeline-vertical在ul上追加timeline-vertical轴线即转为从上到下timeline-start/timeline-end相应变为左/右两侧。官方文档为垂直方向同样提供了全部五种排布结构上与水平版一一对应仅容器多了方向类ul classtimeline timeline-vertical li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul仅右侧只写timeline-middletimeline-end事件内容全部在轴线右侧仅左侧只写timeline-starttimeline-middle事件内容全部在轴线左侧交错各li自由选择timeline-start或timeline-end实现左右交替彩色连接线同样通过hr classbg-primary 图标text-primary实现无图标省略timeline-middle即可。垂直时间线尤其适合移动端纵向滚动阅读也是官方推荐的默认响应式方案见下节。响应式默认垂直、大屏水平把方向类与 Tailwind 断点前缀组合即可实现「小屏垂直、大屏水平」的经典响应式时间线。官方示例在lg断点切换ul classtimeline timeline-vertical lg:timeline-horizontal li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul其原理是timeline-vertical与timeline-horizontal分别应用flex-col/flex-row见 timeline.css而 Tailwind 的lg:前缀会在 ≥1024px 的视口下覆盖为水平布局。由于内部li的网格定位逻辑在源码中分别针对两种方向做了完整实现切换布局时内容会自动重新排布无需改动任何li内部结构。高级图标吸顶timeline-snap-icon与紧凑模式timeline-compact官方文档最后给出一个组合了多个 modifier 的长文本示例ul classtimeline timeline-snap-icon max-md:timeline-compact timeline-vertical li div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-start mb-10 md:text-end time classfont-mono italic1984/time div classtext-lg font-blackFirst Macintosh computer/div !-- 长段落文字 -- /div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end md:mb-10 time classfont-mono italic1998/time div classtext-lg font-blackiMac/div !-- 长段落文字 -- /div hr / /li !-- 后续 li 结构相同 -- /ul这里同时用到了三个关键技巧timeline-snap-icon把原本位于行/列中间的图标「吸附」到起点位置。官方定义其作用为 snaps the icon to the start instead of middle。从源码看它通过覆盖网格变量实现水平方向设置--timeline-col-start: 0.5rem垂直方向设置--timeline-row-start: 0.5remtimeline.css把图标偏移到时间轴起点让长文本从顶部对齐配合time、加粗标题、段落文字可以做出「时间 标题 正文」的富文本时间线。timeline-compact官方定义其作用为 forces all items on one side强制所有条目位于同一侧。源码中它在水平方向把--timeline-row-start设为0垂直方向把--timeline-col-start设为0使内容收拢到单侧timeline.css。max-md:timeline-compact这是响应式组合的另一种用法——在max-md小于 md 断点以下才启用紧凑模式小屏单侧堆叠、大屏双侧展开。辅助排版上示例还使用了time元素加font-mono italic表现年份、text-lg font-black表现标题、mb-10/md:mb-10/md:text-end控制间距与对齐说明 Timeline 的内容区完全兼容 Tailwind 的任意工具类。源码原理CSS Grid 如何驱动 TimelineTimeline 的精髓在于 timeline.css 中基于 CSS Grid 的实现。每个li被定义为3×3 网格 li { apply relative grid shrink-0 items-center; grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); }三个区块分别落入网格的对应位置timeline-start水平方向占据第 1 行上方、跨满 3 列垂直方向占据第 1 列左侧、跨满 3 行timeline.csstimeline-middle固定在中间单元格col-start-2 row-start-2timeline.css图标因此天然居中线timeline-end水平方向占据第 3 行下方、跨满 3 列timeline.css。而hr连接线被放进中间列的上下单元格水平布局或中间行的左右单元格垂直布局并针对「首尾条目」做了精细化圆角处理源码通过:has(.timeline-middle)判断是否存在中间图标进而决定连接线端头的rounded-e-selector/rounded-s-selector圆角方向避免首尾出现多余的圆头timeline.css。timeline-box则是一个独立的卡片盒样式rounded-box圆角、bg-base-100背景、border-base-300边框、px-4 py-2内边距外加极浅的阴影与 0.75rem 字号timeline.css所以它可以放心地叠加在timeline-start或timeline-end上。这套网格方案的核心变量是--timeline-row-start/--timeline-col-start等 CSS 自定义属性timeline-compact、timeline-snap-icon正是通过改写这些变量而非复制整套布局代码来切换行为这也是组件实现高度精简的原因。前缀机制文档中的$$占位符从何而来细心的读者会发现官方文档所有代码示例中类名写作$$timeline、$$timeline-vertical等。这是文档站点为了支持「类名前缀」配置而引入的占位符机制文档站点组件 actions.svelte.js 中的prefixClassNames动作会监听前缀 store并执行node.innerHTML originalContent.replaceAll($$, prefixValue)把$$实时替换成用户配置的前缀默认为空字符串替换后即普通的timeline。与之对应的是组件库构建期的前缀能力addPrefix.js 会在编译时按配置为所有组件类名批量添加前缀例如配置前缀d-后生成d-timeline其测试用例 addPrefix.test.js 中即包含timeline与.timeline:has(.timeline-middle hr):first-child这类选择器的前缀改写验证。因此在实际项目中使用时写timeline系列类名即可若配置了自定义前缀则统一使用配置后的名称。使用要点小结容器用ul classtimeline事件用li不要嵌套多余元素破坏网格结构hr是连接线不是分割线保留首尾条目的hr用于串接除首/末条目外每个li前后各放一个三区块可按需省略只要timeline-start/timeline-end存在内容就会自动落到对应侧都省略则得到纯节点时间线方向类决定走向timeline-horizontal默认与timeline-vertical可结合lg:、max-md:等断点做响应式切换timeline-box可叠加在任意一侧内容上快速获得卡片样式timeline-snap-icon与timeline-compact用于长文本场景的图标吸顶与单侧紧凑排布连接线颜色可自由覆盖给hr加bg-*、给图标加text-*即可无需额外配置。以上内容可直接参考官方示例源文件 timeline 组件文档/components/timeline/page.md)、组件样式实现 timeline.css以及提供给 AI 工具链的简明用法说明 timeline.md在项目中按需组合使用。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 daisyUI Timeline 组件完全指南：从时间轴基础布局到响应式实战
daisyUI Timeline 组件完全指南从时间轴基础布局到响应式实战【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiTimeline时间线是 daisyUI 中用于按时间顺序展示事件列表的组件它用一条贯穿的连接线和图标节点把「事件时间」「事件描述」「过程图标」组织成清晰可读的序列。本文以 daisyUI 官方组件文档 Timeline 页面/components/timeline/page.md) 为主体结合组件源码 timeline.css 与文档站点的前缀渲染机制完整讲解 Timeline 的类名体系、水平/垂直布局、单侧/双侧内容排布、彩色连接线、响应式切换、图标吸顶与紧凑模式并深入源码揭示其基于 CSS Grid 的实现原理读完即可在真实项目中直接落地使用。Timeline 组件定位与类名体系Timeline 组件以ul作为容器每个li表示一个时间点事件。官方文档在其 frontmatter 中定义了完整的类名体系分为四类分类类名作用componenttimelineTimeline 容器挂在ul上parttimeline-startli内位于「起始方向」的内容水平布局中为上方垂直布局中为左侧parttimeline-middleli内位于「中间」的内容通常放图标parttimeline-endli内位于「结束方向」的内容水平布局中为下方垂直布局中为右侧modifiertimeline-snap-icon把图标吸附到起点而非中间modifiertimeline-box为timeline-start或timeline-end应用卡片盒样式modifiertimeline-compact强制所有条目位于同一侧directiontimeline-horizontal水平布局默认directiontimeline-vertical垂直布局其中timeline-horizontal是默认方向添加timeline-vertical类即可切换到垂直布局两者可响应式组合使用见下文。基础结构ul li 三区块与 hr 连接线Timeline 的最小骨架如下ul classtimeline li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li /ul官方文档特别强调了一条关键规则INFO 提示每个条目开头或结尾的hr标签用于显示连接相邻条目的线条。也就是说li内部的hr不是普通的水平分割线而是被 Timeline 组件当作「连接线」使用它占据网格中的连接列/行把前后两个事件的节点串起来。从源码看hr的默认样式是h-1水平方向 4px 高加上bg-base-300背景色timeline.css并且被取消了默认边框border: nonetimeline.css。水平时间线默认方向的五种排布默认情况下不写方向类flex默认为行方向Timeline 呈水平走向。官方文档给出了五种典型排布。双侧文字 图标这是最经典的形态上方放时间、中间放图标、下方放事件描述每个li之间用hr连接ul classtimeline li div classtimeline-start1984/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classh-5 w-5 path fill-ruleevenodd dM10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z clip-ruleevenodd / /svg /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classh-5 w-5 path fill-ruleevenodd dM10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z clip-ruleevenodd / /svg /div div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start2001/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxiPod/div hr / /li li hr / div classtimeline-start2007/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxiPhone/div hr / /li li hr / div classtimeline-start2015/div div classtimeline-middle !-- 图标 SVG 同上 -- /div div classtimeline-end timeline-boxApple Watch/div /li /ul注意观察hr的放置规律除了第一个li的开头以及最后一个li的结尾其余每个li的前后都各有一个hr——前一个hr承接上一节点后一个hr引出下一节点。最后一个li可以省略尾部hr第一条目也可以省略头部hr。这里timeline-end还叠加了timeline-box让描述文字带上卡片盒样式。仅下方bottom side only若只写timeline-middletimeline-end不写timeline-start事件内容会全部排在轴线的下方适合「时间不重要、只需事件流」的展示ul classtimeline li div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul仅上方top side only反过来只写timeline-starttimeline-middle内容全部排在上方ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li li hr / div classtimeline-start timeline-boxiMac/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li !-- 后续 li 结构相同 -- /ul左右交错different sides每个li独立决定内容放在上方还是下方即可实现上下交错的效果例如奇偶项交替适合需要视觉节奏感的场景ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start timeline-boxiPod/div div classtimeline-middle !-- 图标 SVG -- /div hr / /li !-- 后续 li 按需交错 -- /ul彩色连接线colorful lines连接线本质是带bg-base-300的hr因此可以直接用 Tailwind 的颜色类覆盖它。给hr加bg-primary同时给图标加text-primary即可得到一条主色贯穿的强调式时间线ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div div classtimeline-middle svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 fillcurrentColor classtext-primary h-5 w-5 !-- 对勾 path -- /svg /div hr classbg-primary / /li li hr classbg-primary / div classtimeline-middle !-- 图标 SVGtext-primary -- /div div classtimeline-end timeline-boxiMac/div hr classbg-primary / /li !-- 只对需要的线段加 bg-primary未强调的线段保持默认 -- /ul无图标without icons完全省略timeline-middle让时间线与卡片直接相连得到极简的纯文字时间线ul classtimeline li div classtimeline-start timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-end timeline-boxiMac/div hr / /li li hr / div classtimeline-start timeline-boxiPod/div hr / /li li hr / div classtimeline-end timeline-boxiPhone/div hr / /li li hr / div classtimeline-start timeline-boxApple Watch/div /li /ul垂直时间线timeline-vertical在ul上追加timeline-vertical轴线即转为从上到下timeline-start/timeline-end相应变为左/右两侧。官方文档为垂直方向同样提供了全部五种排布结构上与水平版一一对应仅容器多了方向类ul classtimeline timeline-vertical li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul仅右侧只写timeline-middletimeline-end事件内容全部在轴线右侧仅左侧只写timeline-starttimeline-middle事件内容全部在轴线左侧交错各li自由选择timeline-start或timeline-end实现左右交替彩色连接线同样通过hr classbg-primary 图标text-primary实现无图标省略timeline-middle即可。垂直时间线尤其适合移动端纵向滚动阅读也是官方推荐的默认响应式方案见下节。响应式默认垂直、大屏水平把方向类与 Tailwind 断点前缀组合即可实现「小屏垂直、大屏水平」的经典响应式时间线。官方示例在lg断点切换ul classtimeline timeline-vertical lg:timeline-horizontal li div classtimeline-start1984/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxFirst Macintosh computer/div hr / /li li hr / div classtimeline-start1998/div div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end timeline-boxiMac/div hr / /li !-- 后续 li 结构相同 -- /ul其原理是timeline-vertical与timeline-horizontal分别应用flex-col/flex-row见 timeline.css而 Tailwind 的lg:前缀会在 ≥1024px 的视口下覆盖为水平布局。由于内部li的网格定位逻辑在源码中分别针对两种方向做了完整实现切换布局时内容会自动重新排布无需改动任何li内部结构。高级图标吸顶timeline-snap-icon与紧凑模式timeline-compact官方文档最后给出一个组合了多个 modifier 的长文本示例ul classtimeline timeline-snap-icon max-md:timeline-compact timeline-vertical li div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-start mb-10 md:text-end time classfont-mono italic1984/time div classtext-lg font-blackFirst Macintosh computer/div !-- 长段落文字 -- /div hr / /li li hr / div classtimeline-middle !-- 图标 SVG -- /div div classtimeline-end md:mb-10 time classfont-mono italic1998/time div classtext-lg font-blackiMac/div !-- 长段落文字 -- /div hr / /li !-- 后续 li 结构相同 -- /ul这里同时用到了三个关键技巧timeline-snap-icon把原本位于行/列中间的图标「吸附」到起点位置。官方定义其作用为 snaps the icon to the start instead of middle。从源码看它通过覆盖网格变量实现水平方向设置--timeline-col-start: 0.5rem垂直方向设置--timeline-row-start: 0.5remtimeline.css把图标偏移到时间轴起点让长文本从顶部对齐配合time、加粗标题、段落文字可以做出「时间 标题 正文」的富文本时间线。timeline-compact官方定义其作用为 forces all items on one side强制所有条目位于同一侧。源码中它在水平方向把--timeline-row-start设为0垂直方向把--timeline-col-start设为0使内容收拢到单侧timeline.css。max-md:timeline-compact这是响应式组合的另一种用法——在max-md小于 md 断点以下才启用紧凑模式小屏单侧堆叠、大屏双侧展开。辅助排版上示例还使用了time元素加font-mono italic表现年份、text-lg font-black表现标题、mb-10/md:mb-10/md:text-end控制间距与对齐说明 Timeline 的内容区完全兼容 Tailwind 的任意工具类。源码原理CSS Grid 如何驱动 TimelineTimeline 的精髓在于 timeline.css 中基于 CSS Grid 的实现。每个li被定义为3×3 网格 li { apply relative grid shrink-0 items-center; grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); }三个区块分别落入网格的对应位置timeline-start水平方向占据第 1 行上方、跨满 3 列垂直方向占据第 1 列左侧、跨满 3 行timeline.csstimeline-middle固定在中间单元格col-start-2 row-start-2timeline.css图标因此天然居中线timeline-end水平方向占据第 3 行下方、跨满 3 列timeline.css。而hr连接线被放进中间列的上下单元格水平布局或中间行的左右单元格垂直布局并针对「首尾条目」做了精细化圆角处理源码通过:has(.timeline-middle)判断是否存在中间图标进而决定连接线端头的rounded-e-selector/rounded-s-selector圆角方向避免首尾出现多余的圆头timeline.css。timeline-box则是一个独立的卡片盒样式rounded-box圆角、bg-base-100背景、border-base-300边框、px-4 py-2内边距外加极浅的阴影与 0.75rem 字号timeline.css所以它可以放心地叠加在timeline-start或timeline-end上。这套网格方案的核心变量是--timeline-row-start/--timeline-col-start等 CSS 自定义属性timeline-compact、timeline-snap-icon正是通过改写这些变量而非复制整套布局代码来切换行为这也是组件实现高度精简的原因。前缀机制文档中的$$占位符从何而来细心的读者会发现官方文档所有代码示例中类名写作$$timeline、$$timeline-vertical等。这是文档站点为了支持「类名前缀」配置而引入的占位符机制文档站点组件 actions.svelte.js 中的prefixClassNames动作会监听前缀 store并执行node.innerHTML originalContent.replaceAll($$, prefixValue)把$$实时替换成用户配置的前缀默认为空字符串替换后即普通的timeline。与之对应的是组件库构建期的前缀能力addPrefix.js 会在编译时按配置为所有组件类名批量添加前缀例如配置前缀d-后生成d-timeline其测试用例 addPrefix.test.js 中即包含timeline与.timeline:has(.timeline-middle hr):first-child这类选择器的前缀改写验证。因此在实际项目中使用时写timeline系列类名即可若配置了自定义前缀则统一使用配置后的名称。使用要点小结容器用ul classtimeline事件用li不要嵌套多余元素破坏网格结构hr是连接线不是分割线保留首尾条目的hr用于串接除首/末条目外每个li前后各放一个三区块可按需省略只要timeline-start/timeline-end存在内容就会自动落到对应侧都省略则得到纯节点时间线方向类决定走向timeline-horizontal默认与timeline-vertical可结合lg:、max-md:等断点做响应式切换timeline-box可叠加在任意一侧内容上快速获得卡片样式timeline-snap-icon与timeline-compact用于长文本场景的图标吸顶与单侧紧凑排布连接线颜色可自由覆盖给hr加bg-*、给图标加text-*即可无需额外配置。以上内容可直接参考官方示例源文件 timeline 组件文档/components/timeline/page.md)、组件样式实现 timeline.css以及提供给 AI 工具链的简明用法说明 timeline.md在项目中按需组合使用。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考