Reflex Enterprise Mantine Timeline 组件实战指南用 rxe.mantine.timeline 构建线性事件时间轴【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex本指南围绕 Reflex 仓库中 docs/enterprise/mantine/timeline.md 所讲解的rxe.mantine.timeline组件展开介绍如何在纯 Python 的 Reflex 应用中渲染步骤、里程碑、历史事件等线性序列信息并给出可直接复制运行的完整示例、核心参数语义以及结合 State 的交互扩展。读完本文你将掌握时间轴组件的声明式用法、active/bullet_size/line_width/color等关键配置以及如何把时间轴接入 Reflex 状态机实现分步向导一类的动态界面。Timeline 组件是什么rxe.mantine.timeline是 Reflex Enterprise 对 Mantine 开源 React 组件库中 Timeline 的封装用于以线性格式展示一段事件序列或里程碑。正如文档所述它非常适合可视化进度、历史、或任何顺序信息典型场景包括分步向导 / 注册流程步骤条Step 1 → Step 2 → Step 3订单状态流转已下单 → 已支付 → 已发货 → 已签收项目里程碑 / 版本发布历史任务执行日志或审计记录的时间线视图。它属于 Enterprise 组件体系中 Mantine 系列 15 个组件之一见 docs/enterprise/mantine/index.md 与 docs/enterprise/components.md通过rxe.mantine.*命名空间导入与 Autocomplete、Combobox、TagsInput、Tree、RingProgress 等组件并列。环境准备安装并启用 reflex-enterpriseTimeline 组件位于reflex-enterprise包中必须先安装该包依据 docs/enterprise/overview.mdpip install reflex-enterprise安装完成后需要两步启用1. 应用入口使用rxe.App()创建 appimport reflex_enterprise as rxe app rxe.App()2. 在rxconfig.py中使用rxe.Configimport reflex_enterprise as rxe config rxe.Config( app_nameMyApp, ... # 接受 rx.Config 的全部参数外加 rxe.Config 的扩展选项 )需要说明的是Enterprise 组件对免费用户同样开放免费应用会以右下角 Built with Reflex 徽标的形式展示归属具体规则见 docs/enterprise/built-with-reflex.md。基础用法官方演示示例原文档给出了一段可以直接运行的demo exec示例这类代码块在官方文档站点中会实时渲染出界面。核心代码如下import reflex as rx import reflex_enterprise as rxe def timeline_example(): return rx.vstack( rxe.mantine.timeline( rxe.mantine.timeline.item( titleStep 1, bullet•, ), rxe.mantine.timeline.item( titleStep 2, bullet•, ), rxe.mantine.timeline.item( titleStep 3, bullet•, ), active1, bullet_size24, line_width2, colorblue, ) )这段代码展示了 Timeline 组件的两个层级结构层级写法作用容器rxe.mantine.timeline(...)定义整条时间轴承载全局配置激活位置、线宽、颜色等节点rxe.mantine.timeline.item(...)定义时间轴上的单个节点通过title设置标题、bullet设置节点标记外层用rx.vstack包裹是为了在文档页内垂直居中展示在实际页面中你也可以直接返回rxe.mantine.timeline或把它嵌入rx.vstack、rx.hstack、rx.card等任意布局容器中。核心参数详解原文档示例中的四个参数是 Timeline 最常用的配置项这里结合 Mantine 时间轴的语义逐一说明参数示例值含义active1当前进行到的节点索引从 0 开始计数。示例中 3 个节点、active1表示前两个节点索引 0、1处于激活/已完成高亮状态第三个尚未到达bullet_size24每个节点圆点bullet的直径单位为像素数值越大节点越醒目line_width2节点之间连接线的宽度单位为像素colorblue激活状态的颜色Mantine 主题色如blue、teal、red等都会生效节点子组件rxe.mantine.timeline.item在本例中使用了两个参数title节点标题文本直接展示在时间轴内容区bullet节点圆点内显示的标记符号示例中使用•圆点符也可换成数字1、2、3或图标字符。一个常见的改造是把bullet换成步骤序号让时间轴更接近分步向导的视觉形态rxe.mantine.timeline( rxe.mantine.timeline.item(title填写资料, bullet1), rxe.mantine.timeline.item(title邮箱验证, bullet2), rxe.mantine.timeline.item(title完成注册, bullet3), active1, bullet_size24, line_width2, colorteal, )参数命名约定使用 snake_case与其他rxe.mantine.*封装组件保持一致本系列文档例如 docs/enterprise/mantine/tags-input.md明确说明可以沿用 Mantine 文档中提到的 props但传入时必须使用 snake_case。也就是说Mantine 原生的 camelCase 属性如bulletSize、lineWidth在 Reflex 中要写成bullet_size、line_width这样的蛇形命名Python 侧才能正确解析并映射到前端组件。所有rxe.mantine.timeline的属性都应遵循这一约定。进阶将 active 绑定到 State实现动态分步向导时间轴真正的价值在于与 Reflex 状态机联动——当active绑定到 State 变量时界面会随事件处理器的执行自动推进。这一模式与同系列文档中的做法一致ring_progress把value绑定到状态见 docs/enterprise/mantine/ring-progress.mdtags_input把value/on_change绑定到状态见 docs/enterprise/mantine/tags-input.md。下面给出一个可运行的完整示例import reflex as rx import reflex_enterprise as rxe class TimelineState(rx.State): 分步向导状态。 current_step: int 0 rx.event def next_step(self): 前进到下一步。 if self.current_step 3: self.current_step 1 rx.event def prev_step(self): 回退到上一步。 if self.current_step 0: self.current_step - 1 def wizard_timeline(): return rx.vstack( rxe.mantine.timeline( rxe.mantine.timeline.item(titleStep 1, bullet1), rxe.mantine.timeline.item(titleStep 2, bullet2), rxe.mantine.timeline.item(titleStep 3, bullet3), activeTimelineState.current_step, bullet_size24, line_width2, colorblue, ), rx.hstack( rx.button(上一步, on_clickTimelineState.prev_step), rx.button(下一步, on_clickTimelineState.next_step), ), )要点解析activeTimelineState.current_step让时间轴的高亮位置完全由状态驱动点击按钮触发on_click事件事件处理器修改current_step后时间轴自动重渲染通过if边界判断避免索引越界这也是把active语义0 起点、active及之前节点全部高亮落实到业务逻辑的常规做法。更进一步你还可以把bullet或title替换为 State 变量 / computed var渲染动态数据如从后端拉取的订单状态列表时间轴便从静态装饰变为真正的状态可视化组件。与其他 Mantine 组件组合使用Timeline 常常不是孤立出现的。在同一个页面中你可以把它与其他 Enterprise Mantine 组件自由组合例如用rxe.mantine.pill或rxe.mantine.tags_input展示每个步骤关联的标签用rxe.mantine.spoiler折叠时间轴上某一步的详细说明用rxe.mantine.tree展示与里程碑相关的层级数据用rxe.mantine.ring_progress在旁边呈现整体完成度百分比。同系列组件的完整列表与说明见 docs/enterprise/mantine/index.md 和 docs/enterprise/components.md每个组件都有独立的文档页面与可运行示例。许可与可用性说明依据 docs/enterprise/overview.mdTimeline 属于 Enterprise 组件但其云托管与自托管场景均为Free免费档位免费应用可正常使用前提是应用右下角展示 Built with Reflex 徽标企业授权用户可去掉徽标完整的企业版《最终用户许可协议》EULA见 docs/enterprise/LICENSE。小结rxe.mantine.timeline用声明式的 Python 代码即可构建专业的时间轴/分步视图rxe.mantine.timeline定义容器rxe.mantine.timeline.item声明节点active、bullet_size、line_width、color控制激活位置与视觉样式属性统一采用 snake_case。配合 Reflex State 的事件驱动机制时间轴可以轻松演变为分步向导、订单跟踪、进度可视化等实用功能是 Enterprise Mantine 组件集中上手成本最低、收益最直观的组件之一。延伸阅读仓库内路径本文依据的原始文档docs/enterprise/mantine/timeline.mdMantine 组件系列总览docs/enterprise/mantine/index.mdEnterprise 安装与启用docs/enterprise/overview.md状态绑定参考示例docs/enterprise/mantine/ring-progress.md、docs/enterprise/mantine/tags-input.mdBuilt with Reflex 徽标说明docs/enterprise/built-with-reflex.md【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考