# 时间轴 时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。 ## 何时使用 组件 | 使用目的 | 节点数量 | 语言风格 ---|---|---|--- **时间轴
Timeline** | 时间轴主要用于事件追溯的场景，阶段完成的具体时间点是时间轴组件中重要的元素 | 时间轴组件则希望记录的事件详细清晰，以凸显严谨可靠 | 时间轴通常是陈述句，字数多。如”订单已提交“、”商品出库“ **步骤条
Steps** | 步骤条的主要用于填写表单的场景，通过提供明确的步骤，减少用户填写表单的负面情绪，增加表单的填写率 | 步骤条组件追求节点尽量少，是希望凸显需要执行的操作简单易行并且快速 | 步骤条则是祈使句，字数少。如”选择收货地址“、”填写支付信息“ ## 组成要素 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/eb4c6499bfd5d68c50d569d90e4cd24d_ytN40xi2vY.png?height=706&lazyload=true&width=2048) **时间轴可以根据场景选择正序或倒序** 1. **连接线**：串联每一个时间节点，组成完成的时间轴 1. **节点标签** ：时间轴上的节点标签，分为「圆点标签」和「图标标签」，其中「图标标签」可自定义配置 1. **节点标题（可选）** **：** 展示节点名称，文案尽量精简，一般为短语，中文环境建议2-7个字之间，不建议换行 1. **节点时间（可选）** ：节点完成的时间戳，时间组合可自行配置 1. **节点辅助信息（可选）** ：记录事件的具体信息，一般为陈述句，可包含文字链、可点击的人员信息 ## 控件类型 ### 按结构分类 右侧结构或左右结构 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a430dbb554f945dc936e291c73ab4300_xHMqFLN1cL.png?height=604&lazyload=true&width=2048) ### 按属性分类 **如何选择** - **连续时间轴：** 含有预设节点，节点个数可控 - **断点时间轴**：没有预设节点，节点可无限增加 **连续时间轴：** 含有预设节点，展示一个连续的流程节点，如：ITAM资产履历 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/244694c00978d460d2cb6ba3ea146943_LSgdvWOpZ3.png?height=842&lazyload=true&width=2048) **断点时间轴：** 不含有预设节点，客观记录关键事件、操作等，节点无限累计。如：操作记录 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/48216e72e38a4726a87ca02d4e8afc88_5jrY7KxROO.png?height=752&lazyload=true&width=2048) ### 含校验节点 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/52fd0d078bb9bfa0c346c9fdc3efb966_s6PyXQsi9c.png?height=842&lazyload=true&width=2048) ### 常用时间轴信息组合 - 时间轴为单侧，包含基础用法和组合用法 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f81b1b8c6207bf18829f1c0145e1d3ea_BLQWkbNaXH.png?height=862&lazyload=true&width=2048) - 时间轴为双侧，包含基础用法和组合用法 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d2472aac4e913b72a6d50509bf62a31e_qOfZCWAHF1.png?height=730&lazyload=true&width=2048) ## 规则说明 ### 节点状态说明 **无需校验节点** ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0d41825f2a917e0f38d03f185693a7c2_gv0dF2pej9.png?height=376&lazyload=true&width=2048) - **已完成节点**：无需校验的完成节点 - **当前节点**：当前进行中的节点 - **未到达节点**：当前节点之后需要完成的流程节点 - **次要节点**：连续时间轴中的次要节点、或额外节点 - **加载中节点**：节点信息加载状态 **校验节点** ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0206280973e63a9114c65dd5061f65b9_pWAGESHEco.png?height=342&lazyload=true&width=2048) - **成功节点**：表流程节点已完成，且校验通过 - **警示/出错节点**：表节点已完成，但有异常，同时不影响流程继续往下推进 - **失败节点**：表节点校验失败，根据场景可能存在有 - 记录失败节点信息，但允许重新完成该节点。 - 直接导致流程终止
**自定义节点** 节点icon允许自定义。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a95d143829fcde9f1a941868cc69cda1_8aMb3SJDE3.png?height=196&lazyload=true&width=2048) ### 尺寸说明 - 时间轴宽度根据场景自适应 - 事件节点文字尽量简练，建议在2-7个字之间，不建议换行展示 - 事件节点上下间距保持 4N，允许自定义 - 参考建议：紧凑型 16px，普通型 24px，宽松型 32px，视场景选择 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/37f0847c5e582bd86580004c03d8c8c6_Gyqrh0Kp0R.png?height=792&lazyload=true&width=2048) ### 折叠交互说明 可折叠末端多个节点，节点数量自定义。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cc5325d7959b0ea06392ae5937001aa5_Fgt5KMopGJ.png?height=752&lazyload=true&width=2048)