Reflex 中 Pill / Pill Group / PillsInput 组件完全指南在纯 Python 中构建标签与徽章界面【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex导读本文围绕 Reflex 仓库中 docs/enterprise/mantine/pill.md 展开系统讲解 Reflex Enterprise 对 Mantine 组件库中 Pill胶囊标签、Pill Group分组与 PillsInput标签输入容器三者的 Python 封装rxe.mantine.pill、rxe.mantine.pill.group与rxe.mantine.pills_input。你将掌握这些组件在标签列表、徽章展示、表单输入等场景下的完整用法学会通过with_remove_button、on_remove、rx.foreach与 State 事件处理实现可增删的动态标签交互并了解它们与开箱即用的rxe.mantine.tags_input的取舍关系。前置准备安装与启用 Reflex EnterprisePill 系列组件属于 Reflex Enterprise 包reflex-enterprise它构建在 Reflex 之上提供付费级组件与配置能力。根据 docs/enterprise/overview.md 的说明安装方式为pip install reflex-enterprise安装后在应用主文件中使用rxe.App()创建应用、在rxconfig.py中使用rxe.Config配置项目才能启用 Enterprise 组件# 主文件 myapp.py import reflex_enterprise as rxe app rxe.App()# rxconfig.py import reflex_enterprise as rxe config rxe.Config( app_nameMyApp, # 接受 rx.Config 的全部参数外加 rxe.Config 特有的选项 )需要特别说明的两点免费可用Pill、PillsInput 等 Mantine 组件在 cloud 与 self-hosted 两个层面均标记为Free层级见 docs/enterprise/overview.md 的功能清单免费应用可直接使用应用右下角会显示 Built with Reflex 徽标详见 docs/enterprise/built-with-reflex.md。Mantine 组件生态Pill 只是 Reflex Enterprise 集成的 15 个 Mantine 组件之一同系列还包括 Autocomplete、Combobox、MultiSelect、TagsInput、JsonInput、Tree、Timeline、NumberFormatter、RingProgress、SemiCircleProgress、LoadingOverlay、Spoiler、Collapse 等见 docs/enterprise/mantine/index.md它们共享一套以rxe.mantine.*为命名空间的封装方式。另外Reflex 文档站中的python demo exec代码块会被 packages/reflex-site-shared/src/reflex_site_shared/docs/markdown.py 实际执行并渲染为可交互演示因此本文所有示例均为可直接运行的完整页面代码。Pill基础胶囊组件rxe.mantine.pill是对 Mantine 核心组件 Pill 的封装。它是一个轻量组件用于展示一小段信息例如标签tag或标签label既可以作为标签列表中的一项也可以作为独立元素使用。最基础的用法只需要传入文本内容import reflex as rx import reflex_enterprise as rxe def pill_page(): Pill demo. return rxe.mantine.pill( Pill, colorblue, sizemd, variantoutline, radiusxl, with_remove_buttonTrue, on_removelambda: rx.toast(Pill on_remove triggered), )核心参数说明参数取值示例作用colorblue、red、green等 Mantine 主题色设置 Pill 的主题色sizexs、sm、md、lg、xl控制 Pill 的整体尺寸variantoutline、light、filled等控制外观风格outline为描边样式radiusxl、sm、md、lg或数字控制圆角程度xl可呈现胶囊外观with_remove_buttonTrue/False是否在 Pill 内显示移除按钮×on_remove事件处理器或 lambda点击移除按钮时触发的事件从源码结构看这些参数与 Mantine 原生 prop 一一对应按 Reflex 的惯例以snake_case传入with_remove_button、on_remove这一点在 Mantine 系列组件的文档中均有强调见 docs/enterprise/mantine/tags-input.md。on_remove支持传入无参事件处理器上面的示例在点击移除按钮时通过rx.toast弹出提示验证事件确实触发。这也说明 Pill 虽然是展示型组件但仍可通过事件机制与用户交互。Pill Group一键编排多个胶囊rxe.mantine.pill.group用于将多个rxe.mantine.pill组件聚合在一起并按照预定义布局自动排列省去手动使用 Flex、Grid 布局的工作import reflex as rx import reflex_enterprise as rxe def pill_group_page(): Pill demo. return rxe.mantine.pill.group( rxe.mantine.pill(Pill 1), rxe.mantine.pill(Pill 2), )Pill Group 适合静态标签集合例如文章的关键词列表、状态的固定枚举如进行中、已完成、已失败、权限标识等。组内的每个 Pill 仍是独立组件可各自配置color、variant、with_remove_button等属性当需要根据动态数据批量渲染时可参考下一节的rx.foreach模式。PillsInput承载标签的输入容器rxe.mantine.pills_input是对 Mantine PillsInput 的封装。它是一个工具型utility组件用于在表单或独立场景中展示一组标签/标签。它的关键设计特点是组件本身不包含任何交互逻辑只负责渲染传入的 children。也就是说PillsInput 不会替你管理添加标签删除标签等行为这些需要由开发者结合 State 与事件处理自行实现见下文完整示例。也正因如此文档明确给出了一条实用建议如果需要开箱即用、功能完整的组件请考虑使用rxe.mantine.tags_inputTagsInput 自带值管理、回车添加标签等能力。两者的取舍可以概括为PillsInput 展示容器 无内置逻辑适合需要完全自定义交互如自定义验证、自定义数据源的场景TagsInput 完整封装自带value/on_change双向绑定适合快速落地。其基本用法见 docs/enterprise/mantine/tags-input.mdimport reflex as rx import reflex_enterprise as rxe 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, )完整实战用 State foreach 构建可增删的标签输入PillsInput 的真正威力在于它可以与 Reflex 的响应式状态系统组合构建出完全自定义的标签输入体验。下面的完整示例来自原文档展示了如何通过rx.State、rx.foreach与 Pill 的on_remove事件实现增删标签的完整闭环import reflex as rx import reflex_enterprise as rxe 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], )逐层拆解这个示例State 层数据PillInputState.tags是一个set[str]初始包含{Foo, Bar}。这里选择set可以天然保证标签不重复。add_tag/remove_tag两个事件处理器分别负责加入与移除标签均通过rx.event装饰为前端可调用的事件。渲染层结构外层是rxe.mantine.pills_input带labelPillsInput输入框上方标签与idpills-input便于测试与样式定位并通过value[tag1, tag2]传入默认值数组内层是rxe.mantine.pill.group负责排列所有已选标签rx.foreach遍历PillInputState.tags为每个标签渲染一个 Pillwith_remove_buttonTrue显示移除按钮on_removePillInputState.remove_tag(tag)将当前标签值绑定到移除事件——点击 × 即从 State 中删除该标签页面随之响应式刷新rxe.mantine.pills_input.field渲染输入框本体placeholderEnter tags提示用户输入。示例中add_tag的调用如on_blur触发被注释保留读者可按需启用。交互闭环用户点击某个 Pill 的 × 按钮 → 触发remove_tag(tag)→ State 更新 →rx.foreach重新渲染 → 界面同步移除该标签。整个过程全部在纯 Python 中完成无需编写任何 JavaScript。如何补全添加标签逻辑原文档刻意保留了# on_blurPillInputState.add_tag,注释暗示添加逻辑可在此处接入。一种典型的补全方式是监听输入框的回车on_key_down或on_submit或失焦on_blur事件读取输入值后调用add_tag。由于 PillsInput 是无逻辑容器具体触发时机完全由你决定这正是它相比 TagsInput 更灵活的地方。结合仓库源码理解封装原理从 Reflex 仓库的源码结构可以进一步理解这套组件的定位Mantine 系列组件的文档全部位于 docs/enterprise/mantine/ 目录并采用统一的python demo exec写法这些代码块会被 packages/reflex-site-shared/src/reflex_site_shared/docs/markdown.py 实际执行并渲染为可交互演示确保文档示例的真实性组件本身以rxe.mantine.*命名空间提供与 Reflex 开源组件rx.*的封装方式一致——所有 Mantine prop 转换为 snake_case 的 Python 参数事件通过on_*参数暴露文档站点通过 docs/app/reflex_docs/pages/docs/init.py 注册各文档页面的元数据其中 Pill 对应的页面描述为 Small rounded elements for tags, badges, and labels小圆角元素用于标签、徽章与标签与本文介绍完全一致。需要留意的是reflex-enterprise是独立分发的付费包其组件源码不在本开源仓库内本文描述的是其在 Reflex 应用中的公开文档化接口。若本地未安装该包文档演示区块会按 docs/enterprise/overview.md 中的降级逻辑提示安装pip install reflex-enterprise。常见问题与最佳实践1. Pill 与 PillsInput 的关系是什么Pill 是最小的展示单元Pill Group 负责排列多个 PillPillsInput 是承载一组 Pill 一个输入框的容器。三者是单元 → 分组 → 输入容器的递进关系。2. 什么时候用 PillsInput什么时候用 TagsInput需要完全自定义交互自定义添加时机、自定义去重与校验时用 PillsInput需要尽快交付、接受默认行为时用rxe.mantine.tags_input它自带value/on_change绑定与回车添加能力。3. 参数为什么是 snake_case所有 Mantine 原生 prop 在 Reflex 封装中统一转换为 snake_case Python 参数例如withRemoveButton→with_remove_button、onRemove→on_remove。这是整个 Mantine 系列组件的通用约定。4. 如何让 Pill 列表保持不重复示例使用set[str]作为 State 中的标签容器add/remove语义天然去重若需保留顺序可改用list[str]并自行在事件处理器中做去重判断。5. 动态渲染大数据量标签是否有性能顾虑rx.foreach是 Reflex 推荐的高效迭代渲染方式它会为集合中的每个元素生成独立组件当集合内容变化时仅更新发生变化的子树适合标签这种中等规模的动态列表。总结Pill 系列组件为 Reflex 应用提供了Mantine 级的标签/徽章 UI 能力rxe.mantine.pill负责单个胶囊的展示与移除交互rxe.mantine.pill.group负责自动布局rxe.mantine.pills_input则是一个无内置逻辑、可与rx.State、rx.foreach深度集成的标签输入容器。三者组合即可在纯 Python 中构建出可增删、可响应式刷新的完整标签管理界面若需要更省事的方案同系列的 rxe.mantine.tags_input 提供了开箱即用的替代实现。这些组件在 cloud 与 self-hosted 场景均对免费用户开放是 Reflex Enterprise 中成本最低、上手最快的 UI 增强之一。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
