ToolJet Tags 组件完全指南数组数据驱动的标签渲染与配置详解【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetTags标签组件是 ToolJet 中用于将数组数据渲染为可视化标签徽章badge的核心展示组件常被用于状态标识成功、警告、错误等、分类标记与元信息展示场景。本文以官方文档 tags.md 为骨架结合仓库内组件注册配置与渲染源码完整讲解 Tags 组件的属性配置、样式定制、布局控制并补充文档未覆盖的动态数据模式、溢出行为、加载/禁用状态等高级能力帮助你在一线实操中把该组件用透。组件定位什么是 TagsTags 组件接收一个对象数组将其中每一项渲染为一个独立标签。每个标签由标题title、背景色color和文字颜色textColor构成适合在仪表盘、业务应用中展示状态标签或分类标签。从源码注册信息看该组件的正式名称为Tags描述为 Display tag labels默认尺寸为宽 9、高 30网格单位配置定义位于 frontend/src/AppBuilder/WidgetManager/widgets/tags.js实际渲染逻辑位于 frontend/src/AppBuilder/Widgets/Tags/Tags.jsx。在组件目录中它通过 widgets/index.js 统一注册导出。注意区分Tags展示型标签与TagsInput可创建、选择、删除的标签输入组件是两个不同组件后者注册于 frontend/src/AppBuilder/WidgetManager/widgets/TagsInput.js本文仅讨论前者。Properties用数组定义标签在组件右侧属性面板的Properties → Tags中可以设置标签数组。该值必须是对象数组每个对象包含title标签显示的文字color标签的背景色十六进制颜色码textColor标签文字颜色官方文档给出的标准示例{{ [ { title: success, color: #2fb344, textColor: #fff }, { title: info, color: #206bc4, textColor: #fff }, { title: warning, color: #f59f00, textColor: #fff }, { title: danger, color: #d63939, textColor: #fff } ] }}每个对象都应包含 title、该标签对应的颜色代码以及相应的文字颜色这样渲染出的标签才能同时区分文字与底色。属性值支持通过{{ }}表达式绑定可以从查询结果、组件状态或全局变量动态获取数据。动态标签模式源码补充属性面板的Options折叠区中存在一个Dynamic tags开关源码中字段名为advanced类型为 toggle默认false。开启后会额外显示一个Schema代码编辑框用于以字符串形式传入动态数据。渲染逻辑Tags.jsx的处理规则是静态模式advanced为 false直接使用属性面板中配置的选项数组options动态模式advanced为 true优先取data字段若为空数组则回退到schema且当传入值是字符串时会调用resolveWidgetFieldValue解析表达式。此外单个标签还支持可选的visible是否显示该标签、iconTabler 图标名与iconVisibility是否显示图标字段——渲染时会对visible为 false 的标签做过滤并依据iconVisibility决定是否渲染图标Tags.jsx。Component Specific ActionsCSA与 Exposed Variables官方文档说明该组件目前没有实现用于控制组件的 CSA组件专属动作也没有暴露变量。不过从当前仓库源码看该组件的能力已有所演进文档可能存在滞后具体实现事实如下Exposed Variables暴露变量组件通过setExposedVariables暴露了tags由所有标签 title 组成的数组、isVisible、isLoading、isDisabled四个变量并在状态变化时通过useBatchedUpdateEffectArray同步更新Tags.jsxActions动作注册配置中声明了setVisibility设置可见性、setDisable设置禁用、setLoading设置加载态三个可调用动作均接收一个布尔值参数tags.js。因此在实际使用中你可以在事件处理器或查询中通过类似components.tags1.setVisibility(false)的方式编程控制该组件。以文档为准时仍可认为无专属业务动作但结合源码你可以获得更完整的能力视图。GeneralTooltip 提示信息在General折叠区中可以设置Tooltip以字符串格式输入内容后当用户将鼠标悬停在组件上时会显示该字符串作为提示信息。源码中该能力由两个字段配合实现tags.jstooltipFormat提示内容格式可选Plain text纯文本默认/ Markdown / HTMLtooltip提示文本内容默认占位符为 Enter tooltip text。借助 Markdown 或 HTML 格式你可以在 tooltip 中呈现更丰富的排版与富文本内容。Layout桌面端与移动端显隐控制Layout 区域提供两个开关控制组件在不同设备宽度下的显示Layout描述期望值Show on desktop开关以控制是否在桌面视图显示可通过点击fx以编程方式设置{{true}}或{{false}}Show on mobile开关以控制是否在移动视图显示可通过点击fx以编程方式设置{{true}}或{{false}}从注册配置看两者均为 toggle 类型字段showOnDesktop/showOnMobile默认定义值分别为{{true}}与{{false}}tags.js。这意味着默认情况下组件只在桌面端展示如需移动端展示需手动开启。Styles视觉样式与可见性Visibility可见性样式描述默认值Visibility开关控制组件的可见性。可通过其旁的fx按钮以编程方式改变值。若为{{false}}应用部署后组件将不可见。{{true}}更多样式项源码补充除可见性外注册配置的styles段还提供了以下样式控制tags.js样式类型默认值说明Size开关large标签尺寸可选small/large对应渲染时不同的内边距、字号与高度Border radius输入框8标签圆角半径pxPadding开关default容器内边距可选default/noneBox shadow选择器0px 0px 0px 0px #00000040组件容器盒阴影Alignment对齐按钮left标签整体对齐方式可选左/中/右这些样式会在渲染时直接作用于标签元素与容器例如borderRadius会被拼接为borderRadius px应用到每个标签上alignment决定 flex 布局的justifyContentTags.jsx。Overflow标签溢出行为在 Options 折叠区还有一个Overflow开关默认wrap提供两种布局策略Wrap换行标签自动换行排列容器纵向可滚动flexWrap: wrap、overflowY: autoScroll滚动标签单行不换行横向滚动查看flexWrap: nowrap、overflowX: auto。该行为同样由 Tags.jsx 中的条件样式实现标签数量较多时建议使用 wrap 以避免横向滚动条。进阶状态加载态与禁用态组件还内置了Loading state与Disable两个开关默认均为关闭源码中loadingState/disabledState字段默认falseLoading state开启后组件区域会渲染一个居中 Spinner 加载指示器并同步暴露isLoading变量Tags.jsxDisable开启后整个组件与每个标签的透明度降为 0.5、指针事件被禁用pointerEvents: none呈现为不可交互的置灰状态Tags.jsx。这两个状态非常适合在等待数据返回或数据暂不可操作的场景下配合使用例如在查询执行期间通过setLoading(true)给出反馈。小结Tags 组件虽小却是 ToolJet 中展示状态与分类信息最直接的方案通过一个对象数组即可完成多色标签渲染配合动态数据模式、溢出策略、加载/禁用状态与丰富的样式项足以覆盖绝大多数标签展示需求。建议在落地时结合 官方文档 与组件注册配置 tags.js、渲染实现 Tags.jsx 对照阅读以获取与当前版本完全一致的属性与行为细节。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet Tags 组件完全指南：数组数据驱动的标签渲染与配置详解
ToolJet Tags 组件完全指南数组数据驱动的标签渲染与配置详解【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetTags标签组件是 ToolJet 中用于将数组数据渲染为可视化标签徽章badge的核心展示组件常被用于状态标识成功、警告、错误等、分类标记与元信息展示场景。本文以官方文档 tags.md 为骨架结合仓库内组件注册配置与渲染源码完整讲解 Tags 组件的属性配置、样式定制、布局控制并补充文档未覆盖的动态数据模式、溢出行为、加载/禁用状态等高级能力帮助你在一线实操中把该组件用透。组件定位什么是 TagsTags 组件接收一个对象数组将其中每一项渲染为一个独立标签。每个标签由标题title、背景色color和文字颜色textColor构成适合在仪表盘、业务应用中展示状态标签或分类标签。从源码注册信息看该组件的正式名称为Tags描述为 Display tag labels默认尺寸为宽 9、高 30网格单位配置定义位于 frontend/src/AppBuilder/WidgetManager/widgets/tags.js实际渲染逻辑位于 frontend/src/AppBuilder/Widgets/Tags/Tags.jsx。在组件目录中它通过 widgets/index.js 统一注册导出。注意区分Tags展示型标签与TagsInput可创建、选择、删除的标签输入组件是两个不同组件后者注册于 frontend/src/AppBuilder/WidgetManager/widgets/TagsInput.js本文仅讨论前者。Properties用数组定义标签在组件右侧属性面板的Properties → Tags中可以设置标签数组。该值必须是对象数组每个对象包含title标签显示的文字color标签的背景色十六进制颜色码textColor标签文字颜色官方文档给出的标准示例{{ [ { title: success, color: #2fb344, textColor: #fff }, { title: info, color: #206bc4, textColor: #fff }, { title: warning, color: #f59f00, textColor: #fff }, { title: danger, color: #d63939, textColor: #fff } ] }}每个对象都应包含 title、该标签对应的颜色代码以及相应的文字颜色这样渲染出的标签才能同时区分文字与底色。属性值支持通过{{ }}表达式绑定可以从查询结果、组件状态或全局变量动态获取数据。动态标签模式源码补充属性面板的Options折叠区中存在一个Dynamic tags开关源码中字段名为advanced类型为 toggle默认false。开启后会额外显示一个Schema代码编辑框用于以字符串形式传入动态数据。渲染逻辑Tags.jsx的处理规则是静态模式advanced为 false直接使用属性面板中配置的选项数组options动态模式advanced为 true优先取data字段若为空数组则回退到schema且当传入值是字符串时会调用resolveWidgetFieldValue解析表达式。此外单个标签还支持可选的visible是否显示该标签、iconTabler 图标名与iconVisibility是否显示图标字段——渲染时会对visible为 false 的标签做过滤并依据iconVisibility决定是否渲染图标Tags.jsx。Component Specific ActionsCSA与 Exposed Variables官方文档说明该组件目前没有实现用于控制组件的 CSA组件专属动作也没有暴露变量。不过从当前仓库源码看该组件的能力已有所演进文档可能存在滞后具体实现事实如下Exposed Variables暴露变量组件通过setExposedVariables暴露了tags由所有标签 title 组成的数组、isVisible、isLoading、isDisabled四个变量并在状态变化时通过useBatchedUpdateEffectArray同步更新Tags.jsxActions动作注册配置中声明了setVisibility设置可见性、setDisable设置禁用、setLoading设置加载态三个可调用动作均接收一个布尔值参数tags.js。因此在实际使用中你可以在事件处理器或查询中通过类似components.tags1.setVisibility(false)的方式编程控制该组件。以文档为准时仍可认为无专属业务动作但结合源码你可以获得更完整的能力视图。GeneralTooltip 提示信息在General折叠区中可以设置Tooltip以字符串格式输入内容后当用户将鼠标悬停在组件上时会显示该字符串作为提示信息。源码中该能力由两个字段配合实现tags.jstooltipFormat提示内容格式可选Plain text纯文本默认/ Markdown / HTMLtooltip提示文本内容默认占位符为 Enter tooltip text。借助 Markdown 或 HTML 格式你可以在 tooltip 中呈现更丰富的排版与富文本内容。Layout桌面端与移动端显隐控制Layout 区域提供两个开关控制组件在不同设备宽度下的显示Layout描述期望值Show on desktop开关以控制是否在桌面视图显示可通过点击fx以编程方式设置{{true}}或{{false}}Show on mobile开关以控制是否在移动视图显示可通过点击fx以编程方式设置{{true}}或{{false}}从注册配置看两者均为 toggle 类型字段showOnDesktop/showOnMobile默认定义值分别为{{true}}与{{false}}tags.js。这意味着默认情况下组件只在桌面端展示如需移动端展示需手动开启。Styles视觉样式与可见性Visibility可见性样式描述默认值Visibility开关控制组件的可见性。可通过其旁的fx按钮以编程方式改变值。若为{{false}}应用部署后组件将不可见。{{true}}更多样式项源码补充除可见性外注册配置的styles段还提供了以下样式控制tags.js样式类型默认值说明Size开关large标签尺寸可选small/large对应渲染时不同的内边距、字号与高度Border radius输入框8标签圆角半径pxPadding开关default容器内边距可选default/noneBox shadow选择器0px 0px 0px 0px #00000040组件容器盒阴影Alignment对齐按钮left标签整体对齐方式可选左/中/右这些样式会在渲染时直接作用于标签元素与容器例如borderRadius会被拼接为borderRadius px应用到每个标签上alignment决定 flex 布局的justifyContentTags.jsx。Overflow标签溢出行为在 Options 折叠区还有一个Overflow开关默认wrap提供两种布局策略Wrap换行标签自动换行排列容器纵向可滚动flexWrap: wrap、overflowY: autoScroll滚动标签单行不换行横向滚动查看flexWrap: nowrap、overflowX: auto。该行为同样由 Tags.jsx 中的条件样式实现标签数量较多时建议使用 wrap 以避免横向滚动条。进阶状态加载态与禁用态组件还内置了Loading state与Disable两个开关默认均为关闭源码中loadingState/disabledState字段默认falseLoading state开启后组件区域会渲染一个居中 Spinner 加载指示器并同步暴露isLoading变量Tags.jsxDisable开启后整个组件与每个标签的透明度降为 0.5、指针事件被禁用pointerEvents: none呈现为不可交互的置灰状态Tags.jsx。这两个状态非常适合在等待数据返回或数据暂不可操作的场景下配合使用例如在查询执行期间通过setLoading(true)给出反馈。小结Tags 组件虽小却是 ToolJet 中展示状态与分类信息最直接的方案通过一个对象数组即可完成多色标签渲染配合动态数据模式、溢出策略、加载/禁用状态与丰富的样式项足以覆盖绝大多数标签展示需求。建议在落地时结合 官方文档 与组件注册配置 tags.js、渲染实现 Tags.jsx 对照阅读以获取与当前版本完全一致的属性与行为细节。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考