前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载Timeline 是 rsuite 中用于垂直展示时间线步骤、动态、物流轨迹等的组件由Timeline容器与Timeline.Item子项组成。本文基于 docs/pages/components/timeline/en-US/index.md 官方文档展开结合 组件源码 与 测试用例 深入讲解每一个配置项与使用场景。读完本文你将掌握 Timeline 的完整 API、激活项active控制机制、三种对齐方式、时间列、无尽模式、倒序以及自定义图标等全部实战技巧。Timeline 是什么Timeline 以垂直方向展示一系列按时间顺序排列的事件默认渲染为ul列表每个子项渲染为li。典型场景包括订单物流状态追踪、任务审批流转、项目里程碑、操作日志回放等。其内部结构由 尾部连线tail、圆点dot、时间time 与 内容content 四部分构成从 TimelineItem 渲染实现 可以看到Box as{as} ref{ref} className{classes} {...rest} span className{prefix(tail)} / span className{prefix(dot, { custom-dot: dot })}{dot}/span {time div className{prefix(time)}{time}/div} div className{prefix(content)}{children}/div /Box连线与圆点的具体尺寸、颜色均由 样式文件 中的 CSS 变量控制如--rs-time-line-dot-side-length: 10px、--rs-time-line-tail-width: 2px、--rs-timeline-indicator-active-bg激活色等支持跟随主题切换。引入方式在 rsuite 中按需引入import { Timeline } from rsuite;Timeline.Item作为Timeline的静态子组件使用二者也都可以从 入口文件 单独导出。基础用法最简单的用法是直接向Timeline内填入若干个Timeline.Item例如一个物流轨迹import { Timeline } from rsuite; const App () ( Timeline Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );默认情况下最后一项会被标记为 active圆点显示为主题高亮色其余为普通灰色即文档中所说的 By default the lastTimeline.Itemis marked as active (with a blue dot)。自定义激活项Custom active item如果你希望高亮的不是最后一项可以通过isItemActive属性传入一个判定函数来控制。该函数的签名为(index: number, totalItemsCount: number) boolean其中index是子项在时间线中的逻辑索引从 0 开始totalItemsCount是子项总数。Timeline 遍历子项时会依次调用该函数并把返回结果通过内部属性INTERNAL_active传给对应Timeline.Item见 Timeline.tsx。为了方便组件预置了两个常量Timeline.ACTIVE_FIRST将第一项标记为激活Timeline.ACTIVE_LAST将最后一项标记为激活默认行为。在 源码 中它们的实现一目了然const ACTIVE_FIRST (index: number) index 0; const ACTIVE_LAST (index: number, totalItemsCount: number) index totalItemsCount - 1;官方示例同时展示了三种写法——预置常量与自定义函数高亮索引为 1 的第二项import { Timeline, Grid, Row, Col } from rsuite; const ExampleTimeline props ( Timeline {...props} Timeline.ItemFirst item/Timeline.Item Timeline.ItemSecond item/Timeline.Item Timeline.ItemThird item/Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8} ExampleTimeline isItemActive{Timeline.ACTIVE_FIRST} / /Col Col xs{8} ExampleTimeline isItemActive{index index 1} / /Col Col xs{8} ExampleTimeline isItemActive{Timeline.ACTIVE_LAST} / /Col /Row /Grid );这一行为在 测试用例 中有完整验证默认激活最后一项、isItemActive指定项被激活、ACTIVE_FIRST激活第一项、ACTIVE_LAST激活最后一项。补充说明Timeline.Item上曾有一个last属性用于标记最后一项现已在源码中标记为deprecated由INTERNAL_active取代见 TimelineItem.tsx用户无需也不应手动设置。自定义对齐Custom alignmentalign属性控制时间线内容的相对位置取值有三种取值说明left内容在右侧连线与圆点在左侧默认alternate内容在左右两侧交替排列连线与圆点居中right内容在左侧连线与圆点在右侧对应地组件会生成rs-timeline-align-left、rs-timeline-align-alternate、rs-timeline-align-right类名见 Timeline.tsx布局细节由 样式文件 实现其中alternate模式通过nth-child(even/odd)交替控制内容宽度为 50% 并左右交错。官方示例import { Timeline, Grid, Row, Col, Text } from rsuite; const AlignTimeline ({ align }) ( Timeline align{align} Timeline.Item Text2018-03-01/Text TextYour order starts processing/Text /Timeline.Item Timeline.Item Text2018-03-02/Text TextOrder out of stock/Text /Timeline.Item Timeline.Item Text2018-03-10/Text TextArrival/Text /Timeline.Item Timeline.Item Text2018-03-12/Text TextOrder out of the library/Text /Timeline.Item Timeline.Item Text2018-03-15/Text TextSending you a piece/Text /Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8}AlignTimeline alignleft //Col Col xs{8}AlignTimeline alignalternate //Col Col xs{8}AlignTimeline alignright //Col /Row /Grid );自定义时间Custom time通过Timeline.Item的time属性可以为每个条目单独指定时间文本。一旦任一子项带有timeTimeline 会自动给根节点加上rs-timeline-with-time类Timeline.tsx从而切换为 时间 内容 左右分栏的布局import { Timeline, Grid, Row, Col } from rsuite; const TimelineWithTime ({ align }) ( Timeline align{align} Timeline.Item timeNovember 5, 2019 16:27Your order starts processing/Timeline.Item Timeline.Item timeNovember 5, 2019 18:00Your order to be ready for delivery/Timeline.Item Timeline.Item timeYesterday 16:28Your parcel has been out of the library/Timeline.Item Timeline.Item timeToday 02:34Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item timeToday 15:05Sending you a piece/Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8}TimelineWithTime alignleft //Col Col xs{8}TimelineWithTime alignalternate //Col Col xs{8}TimelineWithTime alignright //Col /Row /Grid );从 样式源码 可以看到with-time模式下每个条目变为flex布局时间列与内容列各占 50%且会根据align自动翻转方向、调整时间文本的对齐方式。该行为同样有测试覆盖见 Timeline.spec.tsx断言rs-timeline-with-time类存在。无尽模式Endless当时间线代表当前仍在进行的流程如实时订单追踪最新状态之后还可能持续更新时可以开启endlessimport { Timeline } from rsuite; const App () ( Timeline endless Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );从实现上看endless会在根节点加上rs-timeline-endless类Timeline.tsx。它的核心作用是正常情况下最后一项的尾部连线会被截断成一小段而在 endless 模式下最后一项的连线会继续向下延伸height: auto; min-height: var(--rs-time-line-tail-min-height)见 样式源码暗示时间线尚未结束。倒序展示Reversereverse属性自版本 6.2.0 起提供用于反转时间线条目的展示顺序使最新的条目出现在顶部import { Timeline } from rsuite; const App () ( Timeline reverse Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );需要注意源码中的一个细节reverse只反转渲染顺序不改变逻辑索引。在 Timeline.tsx 中const orderedChildren reverse ? [...childrenArray].reverse() : childrenArray; // ... const logicalIndex reverse ? count - 1 - domIndex : domIndex;也就是说isItemActive拿到的index始终是子项在 JSX 中声明的原始顺序索引因此默认的ACTIVE_LAST会高亮逻辑上的最后一项即倒序后位于 DOM 最顶部的那一项如果你用isItemActive{index index 0}高亮的则是逻辑第一项倒序后位于 DOM 最底部。这一行为在 测试用例 中被完整验证倒序后 DOM 顺序反转、默认激活逻辑最后一项、isItemActive使用逻辑索引以及reverse与endless可同时启用rs-timeline-reverse与rs-timeline-endless类并存。同时 样式源码 也针对reverse endless组合调整了首尾连线的起点与长度保证视觉正确。自定义图标Custom Icondot属性允许你完全替换默认的小圆点传入任意 ReactNode如图标组件。官方示例使用rsuite/icons与react-icons实现了一个完整的物流追踪时间线import Icon from rsuite/icons/Icon; import { Timeline, Text } from rsuite; import { FaPlane, FaTruck, FaUser, FaCheck, FaCreditCard } from react-icons/fa; const App () ( Timeline classNamecustom-timeline Timeline.Item dot{Icon as{FaCreditCard} /} Text mutedMarch 1, 10:20/Text TextYour order starts processing/Text /Timeline.Item Timeline.Item Text mutedMarch 1, 11:34/Text TextThe package really waits for the company to pick up the goods/Text /Timeline.Item Timeline.Item Text mutedMarch 1, 16:20/Text Text[Packed]/Text TextBeijing company has received the shipment/Text /Timeline.Item Timeline.Item dot{Icon as{FaPlane} /} Text mutedMarch 2, 06:12/Text Text[In transit]/Text TextOrder has been shipped from Beijing to Shanghai/Text /Timeline.Item Timeline.Item dot{Icon as{FaTruck} /} Text mutedMarch 2, 09:20/Text Text[In transit]/Text TextSended from the Shanghai Container Center to the distribution center/Text /Timeline.Item Timeline.Item dot{Icon as{FaUser} /} Text mutedMarch 3, 14:20/Text Text[Delivery]/Text TextShanghai Hongkou District Company Deliverer: Mr. Li, currently sending you a shipment/Text /Timeline.Item Timeline.Item dot{Icon as{FaCheck} style{{ background: #15b215, color: #fff }} /} Text mutedMarch 3, 17:50/Text Text[Received]/Text TextYour courier has arrived and the signer is the front desk/Text /Timeline.Item /Timeline );实现层面当传入dot时Timeline.Item会给圆点容器追加rs-timeline-item-custom-dot类并隐藏默认圆点::before { display: none }见 TimelineItem.tsx 与 样式源码。官方示例还通过自定义 CSS 将图标放大为 40px 的圆形徽章样式你可以在自己的业务中按需微调。完整 Props 一览Timeline属性以下属性表格整理自 官方文档 及 Timeline 类型定义属性类型默认值说明版本alignleft \| right \| alternate(left)时间线内容对齐方式asElementType(ul)自定义根元素类型如divchildren *Timeline.Item[]组件内容classPrefixstring(timeline)组件 CSS 类前缀endlessboolean时间线是否为无尽模式最后一项连线延伸isItemActive(index: number, totalItemsCount: number) boolean决定某一项是否标记为激活reverseboolean反转时间线条目顺序![][6.2.0]其中align、endless、reverse、isItemActive的具体行为上文均已结合源码说明as可让你把默认的ul/li换成div等元素测试用例 验证了asdiv的输出classPrefix用于配合 rsuite 的主题定制体系内部经useStyles与useCustom处理。Timeline.Item属性属性类型默认值说明children *ReactNode组件内容classPrefixstring(timeline-item)组件 CSS 类前缀asElementType(li)自定义元素类型dotReactNode自定义时间线条目圆点timeReactNode自定义时间线条目时间dot与time的用法见上文 自定义时间 与 自定义图标 小节。另外需要注意last与INTERNAL_active虽出现在 类型定义 中但均标记为internalINTERNAL_active仅供Timeline内部注入不建议在业务代码中手动使用。样式定制要点如果你需要深度定制时间线外观建议优先通过 样式源码 中的 CSS 变量与类名入手根节点类名rs-timeline随配置追加rs-timeline-align-left/right/alternate、rs-timeline-endless、rs-timeline-reverse、rs-timeline-with-time子项相关类名rs-timeline-item、rs-timeline-item-dot、rs-timeline-item-custom-dot、rs-timeline-item-tail、rs-timeline-item-time、rs-timeline-item-content、rs-timeline-item-active关键 CSS 变量圆点直径--rs-time-line-dot-side-length、连线宽度--rs-time-line-tail-width、内容与圆点间距--rs-time-line-item-content-margin、激活圆点颜色--rs-timeline-indicator-active-bg等。针对align三态的 dot/tail 定位逻辑封装在 mixin 文件 中alternate、with-time等复杂布局则直接写在 index.scss 中可作为实现参考。小结Timeline 组件的核心能力可概括为四点激活项控制通过isItemActive函数与ACTIVE_FIRST/ACTIVE_LAST预置常量灵活决定哪个节点高亮布局切换align提供 left / right / alternate 三态time属性自动切换为时间 内容分栏方向与状态reverse倒序展示逻辑索引保持不变endless表达进行中的时间线视觉定制dot自定义圆点图标CSS 变量与类名体系支持主题化深度定制。这些行为均有源码与测试双重佐证核心实现见 Timeline.tsx、TimelineItem.tsx测试见 Timeline.spec.tsx官方可运行的示例代码片段存放在 docs/pages/components/timeline/fragments 目录下basic / custom-active-item / align / time / endless / reverse / custom可直接对照学习。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Wasmer 3.0.0 迁移指南从 2.x 到新版 API 的完整演进路径Wasmer 3.0.0 迁移指南从 2.x 到新版 API 的完整演进路径 本指南以 Wasmer 官方迁移文档 docs/migration_to_3.0前端UI组件RSUITE Tabs 组件 reversed 属性完全指南实现标签栏倒序布局RSUITE Tabs 组件 reversed 属性完全指南实现标签栏倒序布局 导读 本篇技术指南聚焦 RSUITE React 组件库中 Tabs 组件的前端UI组件rsuite Timeline 时间轴对齐方式align详解left / right / alternate 三种布局的用法与实现原理rsuite Timeline 时间轴对齐方式align详解left / right / alternate 三种布局的用法与实现原理 Timeline前端UI组件上一篇EdgeRemover终极指南三步彻底卸载Windows 10/11中的Microsoft Edge浏览器下一篇3个实用场景指南yuzu模拟器带你轻松玩转Switch游戏创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 2:20:16 · 阅读 1.2k rsuite Timeline 组件完整指南：时间线布局、激活项、对齐与倒序实战
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载Timeline 是 rsuite 中用于垂直展示时间线步骤、动态、物流轨迹等的组件由Timeline容器与Timeline.Item子项组成。本文基于 docs/pages/components/timeline/en-US/index.md 官方文档展开结合 组件源码 与 测试用例 深入讲解每一个配置项与使用场景。读完本文你将掌握 Timeline 的完整 API、激活项active控制机制、三种对齐方式、时间列、无尽模式、倒序以及自定义图标等全部实战技巧。Timeline 是什么Timeline 以垂直方向展示一系列按时间顺序排列的事件默认渲染为ul列表每个子项渲染为li。典型场景包括订单物流状态追踪、任务审批流转、项目里程碑、操作日志回放等。其内部结构由 尾部连线tail、圆点dot、时间time 与 内容content 四部分构成从 TimelineItem 渲染实现 可以看到Box as{as} ref{ref} className{classes} {...rest} span className{prefix(tail)} / span className{prefix(dot, { custom-dot: dot })}{dot}/span {time div className{prefix(time)}{time}/div} div className{prefix(content)}{children}/div /Box连线与圆点的具体尺寸、颜色均由 样式文件 中的 CSS 变量控制如--rs-time-line-dot-side-length: 10px、--rs-time-line-tail-width: 2px、--rs-timeline-indicator-active-bg激活色等支持跟随主题切换。引入方式在 rsuite 中按需引入import { Timeline } from rsuite;Timeline.Item作为Timeline的静态子组件使用二者也都可以从 入口文件 单独导出。基础用法最简单的用法是直接向Timeline内填入若干个Timeline.Item例如一个物流轨迹import { Timeline } from rsuite; const App () ( Timeline Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );默认情况下最后一项会被标记为 active圆点显示为主题高亮色其余为普通灰色即文档中所说的 By default the lastTimeline.Itemis marked as active (with a blue dot)。自定义激活项Custom active item如果你希望高亮的不是最后一项可以通过isItemActive属性传入一个判定函数来控制。该函数的签名为(index: number, totalItemsCount: number) boolean其中index是子项在时间线中的逻辑索引从 0 开始totalItemsCount是子项总数。Timeline 遍历子项时会依次调用该函数并把返回结果通过内部属性INTERNAL_active传给对应Timeline.Item见 Timeline.tsx。为了方便组件预置了两个常量Timeline.ACTIVE_FIRST将第一项标记为激活Timeline.ACTIVE_LAST将最后一项标记为激活默认行为。在 源码 中它们的实现一目了然const ACTIVE_FIRST (index: number) index 0; const ACTIVE_LAST (index: number, totalItemsCount: number) index totalItemsCount - 1;官方示例同时展示了三种写法——预置常量与自定义函数高亮索引为 1 的第二项import { Timeline, Grid, Row, Col } from rsuite; const ExampleTimeline props ( Timeline {...props} Timeline.ItemFirst item/Timeline.Item Timeline.ItemSecond item/Timeline.Item Timeline.ItemThird item/Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8} ExampleTimeline isItemActive{Timeline.ACTIVE_FIRST} / /Col Col xs{8} ExampleTimeline isItemActive{index index 1} / /Col Col xs{8} ExampleTimeline isItemActive{Timeline.ACTIVE_LAST} / /Col /Row /Grid );这一行为在 测试用例 中有完整验证默认激活最后一项、isItemActive指定项被激活、ACTIVE_FIRST激活第一项、ACTIVE_LAST激活最后一项。补充说明Timeline.Item上曾有一个last属性用于标记最后一项现已在源码中标记为deprecated由INTERNAL_active取代见 TimelineItem.tsx用户无需也不应手动设置。自定义对齐Custom alignmentalign属性控制时间线内容的相对位置取值有三种取值说明left内容在右侧连线与圆点在左侧默认alternate内容在左右两侧交替排列连线与圆点居中right内容在左侧连线与圆点在右侧对应地组件会生成rs-timeline-align-left、rs-timeline-align-alternate、rs-timeline-align-right类名见 Timeline.tsx布局细节由 样式文件 实现其中alternate模式通过nth-child(even/odd)交替控制内容宽度为 50% 并左右交错。官方示例import { Timeline, Grid, Row, Col, Text } from rsuite; const AlignTimeline ({ align }) ( Timeline align{align} Timeline.Item Text2018-03-01/Text TextYour order starts processing/Text /Timeline.Item Timeline.Item Text2018-03-02/Text TextOrder out of stock/Text /Timeline.Item Timeline.Item Text2018-03-10/Text TextArrival/Text /Timeline.Item Timeline.Item Text2018-03-12/Text TextOrder out of the library/Text /Timeline.Item Timeline.Item Text2018-03-15/Text TextSending you a piece/Text /Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8}AlignTimeline alignleft //Col Col xs{8}AlignTimeline alignalternate //Col Col xs{8}AlignTimeline alignright //Col /Row /Grid );自定义时间Custom time通过Timeline.Item的time属性可以为每个条目单独指定时间文本。一旦任一子项带有timeTimeline 会自动给根节点加上rs-timeline-with-time类Timeline.tsx从而切换为 时间 内容 左右分栏的布局import { Timeline, Grid, Row, Col } from rsuite; const TimelineWithTime ({ align }) ( Timeline align{align} Timeline.Item timeNovember 5, 2019 16:27Your order starts processing/Timeline.Item Timeline.Item timeNovember 5, 2019 18:00Your order to be ready for delivery/Timeline.Item Timeline.Item timeYesterday 16:28Your parcel has been out of the library/Timeline.Item Timeline.Item timeToday 02:34Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item timeToday 15:05Sending you a piece/Timeline.Item /Timeline ); const App () ( Grid fluid Row Col xs{8}TimelineWithTime alignleft //Col Col xs{8}TimelineWithTime alignalternate //Col Col xs{8}TimelineWithTime alignright //Col /Row /Grid );从 样式源码 可以看到with-time模式下每个条目变为flex布局时间列与内容列各占 50%且会根据align自动翻转方向、调整时间文本的对齐方式。该行为同样有测试覆盖见 Timeline.spec.tsx断言rs-timeline-with-time类存在。无尽模式Endless当时间线代表当前仍在进行的流程如实时订单追踪最新状态之后还可能持续更新时可以开启endlessimport { Timeline } from rsuite; const App () ( Timeline endless Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );从实现上看endless会在根节点加上rs-timeline-endless类Timeline.tsx。它的核心作用是正常情况下最后一项的尾部连线会被截断成一小段而在 endless 模式下最后一项的连线会继续向下延伸height: auto; min-height: var(--rs-time-line-tail-min-height)见 样式源码暗示时间线尚未结束。倒序展示Reversereverse属性自版本 6.2.0 起提供用于反转时间线条目的展示顺序使最新的条目出现在顶部import { Timeline } from rsuite; const App () ( Timeline reverse Timeline.Item16:27:41 Your order starts processing/Timeline.Item Timeline.Item16:28:43 Your order to be ready for delivery/Timeline.Item Timeline.Item16:28:45 Your parcel has been out of the library/Timeline.Item Timeline.Item02:34:41 Send to Shanghai Hongkou Company/Timeline.Item Timeline.Item15:05:29 Sending you a piece/Timeline.Item /Timeline );需要注意源码中的一个细节reverse只反转渲染顺序不改变逻辑索引。在 Timeline.tsx 中const orderedChildren reverse ? [...childrenArray].reverse() : childrenArray; // ... const logicalIndex reverse ? count - 1 - domIndex : domIndex;也就是说isItemActive拿到的index始终是子项在 JSX 中声明的原始顺序索引因此默认的ACTIVE_LAST会高亮逻辑上的最后一项即倒序后位于 DOM 最顶部的那一项如果你用isItemActive{index index 0}高亮的则是逻辑第一项倒序后位于 DOM 最底部。这一行为在 测试用例 中被完整验证倒序后 DOM 顺序反转、默认激活逻辑最后一项、isItemActive使用逻辑索引以及reverse与endless可同时启用rs-timeline-reverse与rs-timeline-endless类并存。同时 样式源码 也针对reverse endless组合调整了首尾连线的起点与长度保证视觉正确。自定义图标Custom Icondot属性允许你完全替换默认的小圆点传入任意 ReactNode如图标组件。官方示例使用rsuite/icons与react-icons实现了一个完整的物流追踪时间线import Icon from rsuite/icons/Icon; import { Timeline, Text } from rsuite; import { FaPlane, FaTruck, FaUser, FaCheck, FaCreditCard } from react-icons/fa; const App () ( Timeline classNamecustom-timeline Timeline.Item dot{Icon as{FaCreditCard} /} Text mutedMarch 1, 10:20/Text TextYour order starts processing/Text /Timeline.Item Timeline.Item Text mutedMarch 1, 11:34/Text TextThe package really waits for the company to pick up the goods/Text /Timeline.Item Timeline.Item Text mutedMarch 1, 16:20/Text Text[Packed]/Text TextBeijing company has received the shipment/Text /Timeline.Item Timeline.Item dot{Icon as{FaPlane} /} Text mutedMarch 2, 06:12/Text Text[In transit]/Text TextOrder has been shipped from Beijing to Shanghai/Text /Timeline.Item Timeline.Item dot{Icon as{FaTruck} /} Text mutedMarch 2, 09:20/Text Text[In transit]/Text TextSended from the Shanghai Container Center to the distribution center/Text /Timeline.Item Timeline.Item dot{Icon as{FaUser} /} Text mutedMarch 3, 14:20/Text Text[Delivery]/Text TextShanghai Hongkou District Company Deliverer: Mr. Li, currently sending you a shipment/Text /Timeline.Item Timeline.Item dot{Icon as{FaCheck} style{{ background: #15b215, color: #fff }} /} Text mutedMarch 3, 17:50/Text Text[Received]/Text TextYour courier has arrived and the signer is the front desk/Text /Timeline.Item /Timeline );实现层面当传入dot时Timeline.Item会给圆点容器追加rs-timeline-item-custom-dot类并隐藏默认圆点::before { display: none }见 TimelineItem.tsx 与 样式源码。官方示例还通过自定义 CSS 将图标放大为 40px 的圆形徽章样式你可以在自己的业务中按需微调。完整 Props 一览Timeline属性以下属性表格整理自 官方文档 及 Timeline 类型定义属性类型默认值说明版本alignleft \| right \| alternate(left)时间线内容对齐方式asElementType(ul)自定义根元素类型如divchildren *Timeline.Item[]组件内容classPrefixstring(timeline)组件 CSS 类前缀endlessboolean时间线是否为无尽模式最后一项连线延伸isItemActive(index: number, totalItemsCount: number) boolean决定某一项是否标记为激活reverseboolean反转时间线条目顺序![][6.2.0]其中align、endless、reverse、isItemActive的具体行为上文均已结合源码说明as可让你把默认的ul/li换成div等元素测试用例 验证了asdiv的输出classPrefix用于配合 rsuite 的主题定制体系内部经useStyles与useCustom处理。Timeline.Item属性属性类型默认值说明children *ReactNode组件内容classPrefixstring(timeline-item)组件 CSS 类前缀asElementType(li)自定义元素类型dotReactNode自定义时间线条目圆点timeReactNode自定义时间线条目时间dot与time的用法见上文 自定义时间 与 自定义图标 小节。另外需要注意last与INTERNAL_active虽出现在 类型定义 中但均标记为internalINTERNAL_active仅供Timeline内部注入不建议在业务代码中手动使用。样式定制要点如果你需要深度定制时间线外观建议优先通过 样式源码 中的 CSS 变量与类名入手根节点类名rs-timeline随配置追加rs-timeline-align-left/right/alternate、rs-timeline-endless、rs-timeline-reverse、rs-timeline-with-time子项相关类名rs-timeline-item、rs-timeline-item-dot、rs-timeline-item-custom-dot、rs-timeline-item-tail、rs-timeline-item-time、rs-timeline-item-content、rs-timeline-item-active关键 CSS 变量圆点直径--rs-time-line-dot-side-length、连线宽度--rs-time-line-tail-width、内容与圆点间距--rs-time-line-item-content-margin、激活圆点颜色--rs-timeline-indicator-active-bg等。针对align三态的 dot/tail 定位逻辑封装在 mixin 文件 中alternate、with-time等复杂布局则直接写在 index.scss 中可作为实现参考。小结Timeline 组件的核心能力可概括为四点激活项控制通过isItemActive函数与ACTIVE_FIRST/ACTIVE_LAST预置常量灵活决定哪个节点高亮布局切换align提供 left / right / alternate 三态time属性自动切换为时间 内容分栏方向与状态reverse倒序展示逻辑索引保持不变endless表达进行中的时间线视觉定制dot自定义圆点图标CSS 变量与类名体系支持主题化深度定制。这些行为均有源码与测试双重佐证核心实现见 Timeline.tsx、TimelineItem.tsx测试见 Timeline.spec.tsx官方可运行的示例代码片段存放在 docs/pages/components/timeline/fragments 目录下basic / custom-active-item / align / time / endless / reverse / custom可直接对照学习。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Wasmer 3.0.0 迁移指南从 2.x 到新版 API 的完整演进路径Wasmer 3.0.0 迁移指南从 2.x 到新版 API 的完整演进路径 本指南以 Wasmer 官方迁移文档 docs/migration_to_3.0前端UI组件RSUITE Tabs 组件 reversed 属性完全指南实现标签栏倒序布局RSUITE Tabs 组件 reversed 属性完全指南实现标签栏倒序布局 导读 本篇技术指南聚焦 RSUITE React 组件库中 Tabs 组件的前端UI组件rsuite Timeline 时间轴对齐方式align详解left / right / alternate 三种布局的用法与实现原理rsuite Timeline 时间轴对齐方式align详解left / right / alternate 三种布局的用法与实现原理 Timeline前端UI组件上一篇EdgeRemover终极指南三步彻底卸载Windows 10/11中的Microsoft Edge浏览器下一篇3个实用场景指南yuzu模拟器带你轻松玩转Switch游戏创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考