在 Reflex Enterprise 中使用 Mantine 组件库14 个企业级 UI 组件实战指南【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex本文基于仓库内 docs/enterprise/mantine/index.md 及其同级组件文档系统梳理 Reflex Enterprise 对 Mantine React 组件库的封装方式、安装激活流程以及 Autocomplete、Combobox、Tree、RingProgress 等 14 个组件的完整用法与代码示例。Mantine 是一套面向现代 Web 应用的高质量 React 组件库以灵活、可定制、易用著称。Reflex Enterprise 将这些组件中的一部分封装进 Reflex 的纯 Python 组件体系使你可以用rxe.mantine.*命名空间在 Python 中直接构建输入、数据展示、进度反馈等交互界面。读完本文你将掌握 reflex-enterprise 的安装与激活方式、组件命名与属性传递规范并能直接落地 14 个组件的可运行示例。Mantine 与 Reflex Enterprise 的集成方式Mantine 本身是 React 生态的组件库而 Reflex 应用的前端最终会编译为 React。Reflex Enterprise 正是在这一层做了桥接把 Mantine 的部分组件封装为 Python 组件开发者无需编写 JavaScript即可在纯 Python 应用中复用 Mantine 的高质量 UI。根据 docs/enterprise/mantine/index.md目前可供使用的组件共 14 个类别组件Python 调用名表单与输入JsonInputrxe.mantine.json_input表单与输入Autocompleterxe.mantine.autocomplete表单与输入ComboBoxrxe.mantine.combobox表单与输入Multiselectrxe.mantine.multi_select表单与输入Pill / PillsInputrxe.mantine.pill/rxe.mantine.pills_input表单与输入TagsInputrxe.mantine.tags_input数据展示Treerxe.mantine.tree进度反馈RingProgressrxe.mantine.ring_progress进度反馈SemiCircleProgressrxe.mantine.semi_circle_progress进度反馈LoadingOverlayrxe.mantine.loading_overlay数据展示NumberFormatterrxe.mantine.number_formatter数据展示Spoilerrxe.mantine.spoiler数据展示Timelinerxe.mantine.timeline交互折叠Collapserxe.mantine.collapse这些组件在 docs/enterprise/components.md 中被归类为 Rich UI components from Mantine library并且在功能表中标记为FreeCloud Tier 与 Self-hosted Tier 均为 Free意味着免费应用即可使用——代价是应用右下角会显示 Built with Reflex 角标。安装与激活 reflex-enterpriseMantine 组件属于 Reflex Enterprise 扩展包必须在reflex之外单独安装pip install reflex-enterprise根据 docs/enterprise/overview.md安装后还需要做两处激活Enterprise 组件才会生效主应用文件中创建rxe.App()而非rx.App()import reflex_enterprise as rxe app rxe.App()rxconfig.py中使用rxe.Config它接受rx.Config的全部参数并额外支持rxe.Config专属选项import reflex_enterprise as rxe config rxe.Config( app_nameMyApp, # 接受 rx.Config 参数外加 rxe.Config 专属选项 )命名空间与属性传递规范所有 Mantine 组件都统一挂在rxe.mantine命名空间下命名遵循 Python 的 snake_case 风格如multi_select、ring_progress、json_input。需要注意一个关键约定见 docs/enterprise/mantine/tags-input.md 的提示Mantine 官方文档中列出的 props 都可以使用但必须改写成 snake_case 形式传入。例如 Mantine 文档中的formatOnBlur在 Reflex 中写作format_on_blurthousandSeparator写作thousand_separatorwithRemoveButton写作with_remove_button。这一点在下面所有示例中都有体现。表单与输入类组件Autocomplete输入即提示rxe.mantine.autocomplete在用户输入时即时给出建议选项适合搜索框、下拉联想等场景见 docs/enterprise/mantine/autocomplete.mdimport reflex as rx import reflex_enterprise as rxe def autocomplete_example(): return rx.vstack( rxe.mantine.autocomplete( data[Apple, Banana, Cherry, Date, Elderberry], placeholderType a fruit, labelFruit Autocomplete, descriptionSelect a fruit from the list, ), )核心参数data候选项列表、placeholder占位提示、label字段标签、description辅助说明。Combobox自由组合的下拉选择rxe.mantine.combobox是对 Mantine Combobox 的封装可显示选项列表并允许单选或多选适用于表单及独立组件场景见 docs/enterprise/mantine/combobox.md。它采用组合式 API由target、dropdown、options、option逐层嵌套import reflex as rx import reflex_enterprise as rxe def combobox_page(): Combobox demo. return rxe.mantine.combobox( rxe.mantine.combobox.target( rx.input(typebutton), ), rxe.mantine.combobox.dropdown( rxe.mantine.combobox.options( rxe.mantine.combobox.option(Option 1), rxe.mantine.combobox.option(Option 2), rxe.mantine.combobox.option(Option 3), ), ), labelCombobox, placeholderSelect a value, )这种嵌套结构把「触发目标」「下拉面板」「选项集合」「单个选项」拆分成独立子组件方便按需组合出定制化的选择交互。MultiSelect多选下拉rxe.mantine.multi_select用于从列表中选择多个选项并通过状态类与on_change事件实现双向绑定见 docs/enterprise/mantine/multi-select.mdimport reflex as rx import reflex_enterprise as rxe class MultiSelectState(rx.State): selected_fruits: list [] def set_selected_fruits(self, value: list): self.selected_fruits value def multi_select_example(): return rx.vstack( rxe.mantine.multi_select( labelSelect fruits, placeholderPick all that you like, data[Apple, Banana, Cherry, Date, Elderberry], valueMultiSelectState.selected_fruits, on_changeMultiSelectState.set_selected_fruits, ) )value绑定状态变量、on_change绑定事件处理器即可把用户的多选结果同步进 Reflex State。TagsInput标签输入rxe.mantine.tags_input是开箱即用的标签管理组件。基础用法只需占位符与标签见 docs/enterprise/mantine/tags-input.mddef tags_input_simple_page(): TagsInput demo. return rxe.mantine.tags_input( placeholderEnter tags, labelPress Enter to ad a tag, )与状态结合时通过valueon_change维持标签列表class TagsInputState(rx.State): State for the TagsInput component. tags: list[str] [Tag1, Tag2] rx.event def update_tags(self, tags: list[str]): Add a tag to the list of tags. self.tags tags def tags_input_page(): TagsInput demo. return rxe.mantine.tags_input( valueTagsInputState.tags, on_changeTagsInputState.update_tags, placeholderEnter tags, labelTagsInput, descriptionThis is a TagsInput component, error, sizemd, radiusxl, )Pill / Pill Group / PillsInput胶囊标签三件套rxe.mantine.pill用于展示小段信息标签、标记等支持颜色、尺寸、变体、圆角及移除按钮见 docs/enterprise/mantine/pill.mddef pill_page(): Pill demo. return rxe.mantine.pill( Pill, colorblue, sizemd, variantoutline, radiusxl, with_remove_buttonTrue, on_removelambda: rx.toast(Pill on_remove triggered), )rxe.mantine.pill.group以预置布局对多个 Pill 分组def pill_group_page(): Pill demo. return rxe.mantine.pill.group( rxe.mantine.pill(Pill 1), rxe.mantine.pill(Pill 2), )rxe.mantine.pills_input则是无内置逻辑的纯展示/容器组件——它只负责渲染子元素标签的增删逻辑需要自行用 State 实现。文档同时提示如果需要开箱即用的完整功能请优先使用rxe.mantine.tags_inputdocs/enterprise/mantine/pill.md。官方示例用rx.foreach渲染标签集合并配with_remove_button的移除交互class PillInputState(rx.State): State for the PillsInput demo. tags: set[str] {Foo, Bar} rx.event def add_tag(self, tag: str): Add a tag to the list of tags. self.tags.add(tag) rx.event def remove_tag(self, tag: str): Remove a tag from the list of tags. self.tags.remove(tag) def pills_input_page(): PillsInput demo. return rxe.mantine.pills_input( rxe.mantine.pill.group( rx.foreach( PillInputState.tags, lambda tag: rxe.mantine.pill( tag, with_remove_buttonTrue, on_removePillInputState.remove_tag(tag), ), ), rxe.mantine.pills_input.field( placeholderEnter tags, # on_blurPillInputState.add_tag, ), ), labelPillsInput, idpills-input, value[tag1, tag2], )JsonInput结构化 JSON 输入rxe.mantine.json_input提供对 JSON 数据的友好输入体验内置校验与格式化见 docs/enterprise/mantine/json-input.md。format_on_blurTrue表示失焦时自动格式化requiredTrue强制必填class JsonInputState(rx.State): json_data: str def set_json_data(self, value: str): self.json_data value def json_input_example(): return rxe.mantine.json_input( idjson-input, valueJsonInputState.json_data, placeholderEnter JSON data, labelJSON Input, descriptionPlease enter valid JSON data., requiredTrue, sizemd, format_on_blurTrue, on_changeJsonInputState.set_json_data, width300px, )数据展示类组件Tree层级树形结构rxe.mantine.tree以树状结构展示层级数据节点可展开/折叠便于在大数据集中导航见 docs/enterprise/mantine/tree.mddef tree_example(): return rxe.mantine.tree( data[ { value: 0, label: Root, children: [ {value: 0-1, label: Child 1}, {value: 0-2, label: Child 2}, ], } ], )需要注意文档中的明确限制由于 pydantic 的技术限制Tree 组件的data属性最多只支持 5 层深度。设计嵌套数据时不要超过这一深度。Timeline线性时间轴rxe.mantine.timeline用于以线性方式展示事件或里程碑序列进度、历史等时序信息由timeline.item组成支持active当前激活步骤、bullet节点符号、bullet_size、line_width与color等控制见 docs/enterprise/mantine/timeline.mddef 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, ) )NumberFormatter数字格式化rxe.mantine.number_formatter以友好的方式格式化数字可指定前缀、后缀、千位分隔等见 docs/enterprise/mantine/number-formatter.mddef number_formatter_example(): return rx.vstack( rxe.mantine.number_formatter( value100, prefix$, ), rxe.mantine.number_formatter( value100, suffix€, ), rxe.mantine.number_formatter( value1234567.89, thousand_separatorTrue, ), )三个示例分别演示了货币前缀$、货币后缀€以及千位分隔符1,234,567.89的格式化效果。Spoiler内容折叠展示rxe.mantine.spoiler用于隐藏/展示内容适合承载补充信息或次要细节。max_height控制折叠时可见高度超出部分通过show_label/hide_label按钮展开收起见 docs/enterprise/mantine/spoiler.mddef spoiler_example(): return rx.vstack( rxe.mantine.spoiler( This is a spoiler zone where lorem ipsum text dolor sit amet..., max_height50, show_labelShow more, hide_labelShow less, ), )Collapse可折叠区块rxe.mantine.collapse创建可折叠区块常与按钮等交互元素联动。in_属性控制展开状态注意 snake_case 下in写作in_配合 State 实现显隐切换见 docs/enterprise/mantine/collapse.mdclass CollapseState(rx.State): is_open: bool False rx.event def toggle_collapse(self): self.is_open not self.is_open def collapse_example(): return rx.vstack( rxe.mantine.collapse( rx.text( This is a collapsible section. Click the button to toggle the collapse., font_sizelg, ), in_CollapseState.is_open, labelCollapsible Section, descriptionClick the button to toggle the collapse., ), rx.button( Toggle Collapse, on_clicklambda: CollapseState.toggle_collapse, ), )进度与反馈类组件RingProgress环形进度rxe.mantine.ring_progress以环形形式展示进度百分比适合仪表盘等紧凑指标场景。sections传入分段字典列表含value与color可叠加多个分段见 docs/enterprise/mantine/ring-progress.mdimport random class RingProgressState(rx.State): value: int 50 rx.event def random(self): self.value random.randint(0, 100) def ring_progress_example(): return rx.vstack( rxe.mantine.ring_progress( size100, sections[ {value: RingProgressState.value, color: blue}, ], ), rx.button(Randomize, on_clickRingProgressState.random), )示例中用rx.button触发 State 中的随机事件实时刷新环形进度演示了组件与事件系统的联动。SemiCircleProgress半圆进度rxe.mantine.semi_circle_progress以半圆形式展示进度适合仪表盘类界面。与 RingProgress 不同它直接通过value属性接收数值见 docs/enterprise/mantine/semi-circle-progress.mdclass SemiCircleProgressState(rx.State): value: int 50 rx.event def random(self): self.value random.randint(0, 100) def semi_circle_progress_example(): return rx.vstack( rxe.mantine.semi_circle_progress( size100, valueSemiCircleProgressState.value, ), rx.button(Randomize, on_clickSemiCircleProgressState.random), )LoadingOverlay加载遮罩rxe.mantine.loading_overlay在子元素上方覆盖加载遮罩用于提示异步流程进行中并阻止用户与底层内容交互。visible控制显隐overlay_props以字典形式传入遮罩样式如圆角、模糊度z_index控制层级见 docs/enterprise/mantine/loading-overlay.mdclass LoadingOverlayState(rx.State): loading: bool False rx.event def toggle_loading(self): self.loading not self.loading def loading_overlay_example(): return ( rx.container( rxe.mantine.loading_overlay( rx.text( Loading Overlay Example, height200px, width100px, ), overlay_props{radius: sm, blur: 2}, visibleLoadingOverlayState.loading, z_index1000, ), ), rx.button(Toggle Loading, on_clickLoadingOverlayState.toggle_loading), )实践要点与限制总结综合以上各组件文档在使用 Reflex Enterprise 的 Mantine 组件时有几点需要特别留意依赖安装必须额外执行pip install reflex-enterprise并在主文件使用rxe.App()、在rxconfig.py使用rxe.Config激活见 docs/enterprise/overview.md。命名规范组件统一为rxe.mantine.snake_case_nameMantine 官方 props 均可用但必须转成 snake_case如format_on_blur、with_remove_button、thousand_separator。组合式组件Combobox、Timeline、Pill 等采用嵌套子组件 API如combobox.target、combobox.dropdown、timeline.item、pill.group层级结构即 UI 结构。状态绑定输入类组件普遍支持valueon_change绑定 Reflex State进度类组件配合rx.event可实时刷新。已知限制Tree 的data因 pydantic 技术限制最多支持 5 层深度docs/enterprise/mantine/tree.mdPillsInput 是纯容器完整交互请使用 TagsInputdocs/enterprise/mantine/pill.md。许可与角标这些组件对免费应用开放但应用右下角会显示 Built with Reflex 角标见 docs/enterprise/overview.md。进一步阅读组件总览docs/enterprise/mantine/index.md各组件详细文档docs/enterprise/mantine/autocomplete.md、docs/enterprise/mantine/combobox.md、docs/enterprise/mantine/multi-select.md、docs/enterprise/mantine/tags-input.md、docs/enterprise/mantine/json-input.md、docs/enterprise/mantine/pill.md、docs/enterprise/mantine/tree.md、docs/enterprise/mantine/timeline.md、docs/enterprise/mantine/number-formatter.md、docs/enterprise/mantine/ring-progress.md、docs/enterprise/mantine/semi-circle-progress.md、docs/enterprise/mantine/loading-overlay.md、docs/enterprise/mantine/spoiler.md、docs/enterprise/mantine/collapse.mdEnterprise 安装与整体功能docs/enterprise/overview.mdEnterprise 组件索引docs/enterprise/components.md【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Reflex Enterprise 中使用 Mantine 组件库：14 个企业级 UI 组件实战指南
在 Reflex Enterprise 中使用 Mantine 组件库14 个企业级 UI 组件实战指南【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex本文基于仓库内 docs/enterprise/mantine/index.md 及其同级组件文档系统梳理 Reflex Enterprise 对 Mantine React 组件库的封装方式、安装激活流程以及 Autocomplete、Combobox、Tree、RingProgress 等 14 个组件的完整用法与代码示例。Mantine 是一套面向现代 Web 应用的高质量 React 组件库以灵活、可定制、易用著称。Reflex Enterprise 将这些组件中的一部分封装进 Reflex 的纯 Python 组件体系使你可以用rxe.mantine.*命名空间在 Python 中直接构建输入、数据展示、进度反馈等交互界面。读完本文你将掌握 reflex-enterprise 的安装与激活方式、组件命名与属性传递规范并能直接落地 14 个组件的可运行示例。Mantine 与 Reflex Enterprise 的集成方式Mantine 本身是 React 生态的组件库而 Reflex 应用的前端最终会编译为 React。Reflex Enterprise 正是在这一层做了桥接把 Mantine 的部分组件封装为 Python 组件开发者无需编写 JavaScript即可在纯 Python 应用中复用 Mantine 的高质量 UI。根据 docs/enterprise/mantine/index.md目前可供使用的组件共 14 个类别组件Python 调用名表单与输入JsonInputrxe.mantine.json_input表单与输入Autocompleterxe.mantine.autocomplete表单与输入ComboBoxrxe.mantine.combobox表单与输入Multiselectrxe.mantine.multi_select表单与输入Pill / PillsInputrxe.mantine.pill/rxe.mantine.pills_input表单与输入TagsInputrxe.mantine.tags_input数据展示Treerxe.mantine.tree进度反馈RingProgressrxe.mantine.ring_progress进度反馈SemiCircleProgressrxe.mantine.semi_circle_progress进度反馈LoadingOverlayrxe.mantine.loading_overlay数据展示NumberFormatterrxe.mantine.number_formatter数据展示Spoilerrxe.mantine.spoiler数据展示Timelinerxe.mantine.timeline交互折叠Collapserxe.mantine.collapse这些组件在 docs/enterprise/components.md 中被归类为 Rich UI components from Mantine library并且在功能表中标记为FreeCloud Tier 与 Self-hosted Tier 均为 Free意味着免费应用即可使用——代价是应用右下角会显示 Built with Reflex 角标。安装与激活 reflex-enterpriseMantine 组件属于 Reflex Enterprise 扩展包必须在reflex之外单独安装pip install reflex-enterprise根据 docs/enterprise/overview.md安装后还需要做两处激活Enterprise 组件才会生效主应用文件中创建rxe.App()而非rx.App()import reflex_enterprise as rxe app rxe.App()rxconfig.py中使用rxe.Config它接受rx.Config的全部参数并额外支持rxe.Config专属选项import reflex_enterprise as rxe config rxe.Config( app_nameMyApp, # 接受 rx.Config 参数外加 rxe.Config 专属选项 )命名空间与属性传递规范所有 Mantine 组件都统一挂在rxe.mantine命名空间下命名遵循 Python 的 snake_case 风格如multi_select、ring_progress、json_input。需要注意一个关键约定见 docs/enterprise/mantine/tags-input.md 的提示Mantine 官方文档中列出的 props 都可以使用但必须改写成 snake_case 形式传入。例如 Mantine 文档中的formatOnBlur在 Reflex 中写作format_on_blurthousandSeparator写作thousand_separatorwithRemoveButton写作with_remove_button。这一点在下面所有示例中都有体现。表单与输入类组件Autocomplete输入即提示rxe.mantine.autocomplete在用户输入时即时给出建议选项适合搜索框、下拉联想等场景见 docs/enterprise/mantine/autocomplete.mdimport reflex as rx import reflex_enterprise as rxe def autocomplete_example(): return rx.vstack( rxe.mantine.autocomplete( data[Apple, Banana, Cherry, Date, Elderberry], placeholderType a fruit, labelFruit Autocomplete, descriptionSelect a fruit from the list, ), )核心参数data候选项列表、placeholder占位提示、label字段标签、description辅助说明。Combobox自由组合的下拉选择rxe.mantine.combobox是对 Mantine Combobox 的封装可显示选项列表并允许单选或多选适用于表单及独立组件场景见 docs/enterprise/mantine/combobox.md。它采用组合式 API由target、dropdown、options、option逐层嵌套import reflex as rx import reflex_enterprise as rxe def combobox_page(): Combobox demo. return rxe.mantine.combobox( rxe.mantine.combobox.target( rx.input(typebutton), ), rxe.mantine.combobox.dropdown( rxe.mantine.combobox.options( rxe.mantine.combobox.option(Option 1), rxe.mantine.combobox.option(Option 2), rxe.mantine.combobox.option(Option 3), ), ), labelCombobox, placeholderSelect a value, )这种嵌套结构把「触发目标」「下拉面板」「选项集合」「单个选项」拆分成独立子组件方便按需组合出定制化的选择交互。MultiSelect多选下拉rxe.mantine.multi_select用于从列表中选择多个选项并通过状态类与on_change事件实现双向绑定见 docs/enterprise/mantine/multi-select.mdimport reflex as rx import reflex_enterprise as rxe class MultiSelectState(rx.State): selected_fruits: list [] def set_selected_fruits(self, value: list): self.selected_fruits value def multi_select_example(): return rx.vstack( rxe.mantine.multi_select( labelSelect fruits, placeholderPick all that you like, data[Apple, Banana, Cherry, Date, Elderberry], valueMultiSelectState.selected_fruits, on_changeMultiSelectState.set_selected_fruits, ) )value绑定状态变量、on_change绑定事件处理器即可把用户的多选结果同步进 Reflex State。TagsInput标签输入rxe.mantine.tags_input是开箱即用的标签管理组件。基础用法只需占位符与标签见 docs/enterprise/mantine/tags-input.mddef tags_input_simple_page(): TagsInput demo. return rxe.mantine.tags_input( placeholderEnter tags, labelPress Enter to ad a tag, )与状态结合时通过valueon_change维持标签列表class TagsInputState(rx.State): State for the TagsInput component. tags: list[str] [Tag1, Tag2] rx.event def update_tags(self, tags: list[str]): Add a tag to the list of tags. self.tags tags def tags_input_page(): TagsInput demo. return rxe.mantine.tags_input( valueTagsInputState.tags, on_changeTagsInputState.update_tags, placeholderEnter tags, labelTagsInput, descriptionThis is a TagsInput component, error, sizemd, radiusxl, )Pill / Pill Group / PillsInput胶囊标签三件套rxe.mantine.pill用于展示小段信息标签、标记等支持颜色、尺寸、变体、圆角及移除按钮见 docs/enterprise/mantine/pill.mddef pill_page(): Pill demo. return rxe.mantine.pill( Pill, colorblue, sizemd, variantoutline, radiusxl, with_remove_buttonTrue, on_removelambda: rx.toast(Pill on_remove triggered), )rxe.mantine.pill.group以预置布局对多个 Pill 分组def pill_group_page(): Pill demo. return rxe.mantine.pill.group( rxe.mantine.pill(Pill 1), rxe.mantine.pill(Pill 2), )rxe.mantine.pills_input则是无内置逻辑的纯展示/容器组件——它只负责渲染子元素标签的增删逻辑需要自行用 State 实现。文档同时提示如果需要开箱即用的完整功能请优先使用rxe.mantine.tags_inputdocs/enterprise/mantine/pill.md。官方示例用rx.foreach渲染标签集合并配with_remove_button的移除交互class PillInputState(rx.State): State for the PillsInput demo. tags: set[str] {Foo, Bar} rx.event def add_tag(self, tag: str): Add a tag to the list of tags. self.tags.add(tag) rx.event def remove_tag(self, tag: str): Remove a tag from the list of tags. self.tags.remove(tag) def pills_input_page(): PillsInput demo. return rxe.mantine.pills_input( rxe.mantine.pill.group( rx.foreach( PillInputState.tags, lambda tag: rxe.mantine.pill( tag, with_remove_buttonTrue, on_removePillInputState.remove_tag(tag), ), ), rxe.mantine.pills_input.field( placeholderEnter tags, # on_blurPillInputState.add_tag, ), ), labelPillsInput, idpills-input, value[tag1, tag2], )JsonInput结构化 JSON 输入rxe.mantine.json_input提供对 JSON 数据的友好输入体验内置校验与格式化见 docs/enterprise/mantine/json-input.md。format_on_blurTrue表示失焦时自动格式化requiredTrue强制必填class JsonInputState(rx.State): json_data: str def set_json_data(self, value: str): self.json_data value def json_input_example(): return rxe.mantine.json_input( idjson-input, valueJsonInputState.json_data, placeholderEnter JSON data, labelJSON Input, descriptionPlease enter valid JSON data., requiredTrue, sizemd, format_on_blurTrue, on_changeJsonInputState.set_json_data, width300px, )数据展示类组件Tree层级树形结构rxe.mantine.tree以树状结构展示层级数据节点可展开/折叠便于在大数据集中导航见 docs/enterprise/mantine/tree.mddef tree_example(): return rxe.mantine.tree( data[ { value: 0, label: Root, children: [ {value: 0-1, label: Child 1}, {value: 0-2, label: Child 2}, ], } ], )需要注意文档中的明确限制由于 pydantic 的技术限制Tree 组件的data属性最多只支持 5 层深度。设计嵌套数据时不要超过这一深度。Timeline线性时间轴rxe.mantine.timeline用于以线性方式展示事件或里程碑序列进度、历史等时序信息由timeline.item组成支持active当前激活步骤、bullet节点符号、bullet_size、line_width与color等控制见 docs/enterprise/mantine/timeline.mddef 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, ) )NumberFormatter数字格式化rxe.mantine.number_formatter以友好的方式格式化数字可指定前缀、后缀、千位分隔等见 docs/enterprise/mantine/number-formatter.mddef number_formatter_example(): return rx.vstack( rxe.mantine.number_formatter( value100, prefix$, ), rxe.mantine.number_formatter( value100, suffix€, ), rxe.mantine.number_formatter( value1234567.89, thousand_separatorTrue, ), )三个示例分别演示了货币前缀$、货币后缀€以及千位分隔符1,234,567.89的格式化效果。Spoiler内容折叠展示rxe.mantine.spoiler用于隐藏/展示内容适合承载补充信息或次要细节。max_height控制折叠时可见高度超出部分通过show_label/hide_label按钮展开收起见 docs/enterprise/mantine/spoiler.mddef spoiler_example(): return rx.vstack( rxe.mantine.spoiler( This is a spoiler zone where lorem ipsum text dolor sit amet..., max_height50, show_labelShow more, hide_labelShow less, ), )Collapse可折叠区块rxe.mantine.collapse创建可折叠区块常与按钮等交互元素联动。in_属性控制展开状态注意 snake_case 下in写作in_配合 State 实现显隐切换见 docs/enterprise/mantine/collapse.mdclass CollapseState(rx.State): is_open: bool False rx.event def toggle_collapse(self): self.is_open not self.is_open def collapse_example(): return rx.vstack( rxe.mantine.collapse( rx.text( This is a collapsible section. Click the button to toggle the collapse., font_sizelg, ), in_CollapseState.is_open, labelCollapsible Section, descriptionClick the button to toggle the collapse., ), rx.button( Toggle Collapse, on_clicklambda: CollapseState.toggle_collapse, ), )进度与反馈类组件RingProgress环形进度rxe.mantine.ring_progress以环形形式展示进度百分比适合仪表盘等紧凑指标场景。sections传入分段字典列表含value与color可叠加多个分段见 docs/enterprise/mantine/ring-progress.mdimport random class RingProgressState(rx.State): value: int 50 rx.event def random(self): self.value random.randint(0, 100) def ring_progress_example(): return rx.vstack( rxe.mantine.ring_progress( size100, sections[ {value: RingProgressState.value, color: blue}, ], ), rx.button(Randomize, on_clickRingProgressState.random), )示例中用rx.button触发 State 中的随机事件实时刷新环形进度演示了组件与事件系统的联动。SemiCircleProgress半圆进度rxe.mantine.semi_circle_progress以半圆形式展示进度适合仪表盘类界面。与 RingProgress 不同它直接通过value属性接收数值见 docs/enterprise/mantine/semi-circle-progress.mdclass SemiCircleProgressState(rx.State): value: int 50 rx.event def random(self): self.value random.randint(0, 100) def semi_circle_progress_example(): return rx.vstack( rxe.mantine.semi_circle_progress( size100, valueSemiCircleProgressState.value, ), rx.button(Randomize, on_clickSemiCircleProgressState.random), )LoadingOverlay加载遮罩rxe.mantine.loading_overlay在子元素上方覆盖加载遮罩用于提示异步流程进行中并阻止用户与底层内容交互。visible控制显隐overlay_props以字典形式传入遮罩样式如圆角、模糊度z_index控制层级见 docs/enterprise/mantine/loading-overlay.mdclass LoadingOverlayState(rx.State): loading: bool False rx.event def toggle_loading(self): self.loading not self.loading def loading_overlay_example(): return ( rx.container( rxe.mantine.loading_overlay( rx.text( Loading Overlay Example, height200px, width100px, ), overlay_props{radius: sm, blur: 2}, visibleLoadingOverlayState.loading, z_index1000, ), ), rx.button(Toggle Loading, on_clickLoadingOverlayState.toggle_loading), )实践要点与限制总结综合以上各组件文档在使用 Reflex Enterprise 的 Mantine 组件时有几点需要特别留意依赖安装必须额外执行pip install reflex-enterprise并在主文件使用rxe.App()、在rxconfig.py使用rxe.Config激活见 docs/enterprise/overview.md。命名规范组件统一为rxe.mantine.snake_case_nameMantine 官方 props 均可用但必须转成 snake_case如format_on_blur、with_remove_button、thousand_separator。组合式组件Combobox、Timeline、Pill 等采用嵌套子组件 API如combobox.target、combobox.dropdown、timeline.item、pill.group层级结构即 UI 结构。状态绑定输入类组件普遍支持valueon_change绑定 Reflex State进度类组件配合rx.event可实时刷新。已知限制Tree 的data因 pydantic 技术限制最多支持 5 层深度docs/enterprise/mantine/tree.mdPillsInput 是纯容器完整交互请使用 TagsInputdocs/enterprise/mantine/pill.md。许可与角标这些组件对免费应用开放但应用右下角会显示 Built with Reflex 角标见 docs/enterprise/overview.md。进一步阅读组件总览docs/enterprise/mantine/index.md各组件详细文档docs/enterprise/mantine/autocomplete.md、docs/enterprise/mantine/combobox.md、docs/enterprise/mantine/multi-select.md、docs/enterprise/mantine/tags-input.md、docs/enterprise/mantine/json-input.md、docs/enterprise/mantine/pill.md、docs/enterprise/mantine/tree.md、docs/enterprise/mantine/timeline.md、docs/enterprise/mantine/number-formatter.md、docs/enterprise/mantine/ring-progress.md、docs/enterprise/mantine/semi-circle-progress.md、docs/enterprise/mantine/loading-overlay.md、docs/enterprise/mantine/spoiler.md、docs/enterprise/mantine/collapse.mdEnterprise 安装与整体功能docs/enterprise/overview.mdEnterprise 组件索引docs/enterprise/components.md【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考