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 应用编辑器中用于将数组数据渲染为标签集合的轻量级展示组件常见于状态标识、分类标记等场景。本文以 ToolJet v2.50.0-LTS 文档为基础结合当前仓库的组件定义源码与运行时实现系统讲解 Tags 组件的数据结构、属性配置、布局与样式控制并补充源码级别的实现细节帮助你完整掌握该组件的配置与使用。组件概述Tags 组件用于把数组类型的数据以标签Tag的形式呈现出来。在 ToolJet 应用编辑器中从左侧组件库拖入 Tags 组件后右侧属性面板即可配置标签内容、显示行为与外观样式。组件默认尺寸为宽 9 格、高 30 格见 组件定义文件展示效果为一系列带圆角、可自定义颜色的胶囊形标签。Properties属性Tags标签数据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 } ] }}需要注意该属性是一个表达式需要包裹在{{ }}中这样 ToolJet 才能把它解析为真实的 JS 数组并渲染。上述示例定义了success、info、warning、danger四个标签分别使用绿色、蓝色、橙色、红色背景与白色文字。源码中的默认数据结构从当前仓库的组件定义源码看Tags 组件默认提供的标签数据结构为widgets/tags.js{{ [ { title: success, color: #34A94733, textColor: #34A947 }, { title: info, color: #405DE61A, textColor: #405DE6 }, { title: warning, color: #F357171A, textColor: #F35717 }, { title: danger, color: #EB2E3933, textColor: #EB2E39 } ] }}这里采用了浅色背景 深色文字的配色方案背景色在主题色后追加两位透明度值并额外支持icon图标名、iconVisibility图标显隐、visible单个标签显隐等字段具体字段在运行时渲染逻辑中的处理可参考 Tags.jsx。其中visible字段会过滤掉值为false的标签Tags.jsx可用于按条件动态隐藏某些标签。静态配置与动态数据两种模式虽然 v2.50.0-LTS 文档只给出了数组表达式这一种写法但从当前仓库源码可以推断该组件已演进出两种数据来源模式widgets/tags.js静态模式Dynamic tags 关闭在属性面板的 Options 手风琴中逐条添加标签选项每个选项可配置标题、背景色Pill color、文字与图标颜色Text and icon、图标Icon以及单个标签的显隐Tag visibility标签项支持拖拽排序、删除点击 Add new option 可新增标签新增标签会按内置 12 色调色板自动取色实现见 Inspector/Components/Tags.jsx动态模式Dynamic tags 开启显示 Schema 代码编辑框直接以表达式形式传入标签数组适合与查询结果、状态变量联动渲染。运行时组件根据advanced开关选择数据源动态模式下优先取data字段其次回退到schema静态模式下取options配置Tags.jsx。因此如果你使用的是旧版 Tags 属性面板直接按文档示例传入对象数组即可若希望标签随数据动态变化可开启 Dynamic tags 并绑定表达式。Overflow溢出行为组件还提供 Overflow 开关决定标签超出容器宽度时的处理方式widgets/tags.jswrap默认标签自动换行容器纵向滚动scroll标签保持单行容器横向滚动。Component Specific Actions组件特定动作v2.50.0-LTS 文档说明Tags 组件当前没有实现任何 CSAComponent-Specific Actions即无法通过事件动作来调控该组件。补充说明从当前仓库源码看组件定义文件中已注册了setVisibility、setDisable、setLoading三个通用动作widgets/tags.js运行时也暴露了对应的设置方法Tags.jsx这是较新版本的能力扩展。若你的实例停留在 v2.50.0-LTS请以无 CSA为准。Exposed Variables暴露变量v2.50.0-LTS 文档说明Tags 组件当前没有暴露任何变量因此无法在表达式中直接引用该组件的标签数据。同理当前仓库源码中组件已额外暴露tags标签标题数组、isVisible、isLoading、isDisabled等变量Tags.jsx供较新版本使用。在 v2.50.0-LTS 下请不要依赖这些变量编写表达式。General通用Tooltip提示信息Tooltip 用于在用户将鼠标悬停在组件上时显示额外的说明文字。在属性面板的General手风琴下以字符串格式填入提示内容即可悬停时组件会将该字符串展示为气泡提示。在较新版本中Tooltip 还支持格式切换Plain text纯文本默认、Markdown、HTML三种渲染格式widgets/tags.js默认提示文本为 Enter tooltip text。悬停提示的实现位于组件容器外层Tags.jsx由编辑器统一注入。Layout布局Tags 组件的布局属性如下表所示Layout说明期望值Show on desktop开关控制是否在桌面端显示。可点击fx以编程方式设置值为{{true}}或{{false}}。Show on mobile开关控制是否在移动端显示。可点击fx以编程方式设置值为{{true}}或{{false}}。源码中showOnDesktop默认值为{{true}}、showOnMobile默认值为{{false}}widgets/tags.js即默认桌面端可见、移动端不可见你可在属性面板的Devices手风琴中调整Inspector/Components/Tags.jsx。Styles样式Tags 组件的样式属性如下Visibility说明默认值Visibility开关控制组件是否可见。可点击fx编程修改其值若为{{false}}应用部署后组件将不可见。默认{{true}}。此外从当前仓库源码可以确认组件还提供以下外观样式项widgets/tags.jsSize标签尺寸small小或large大。小号标签为 12px 字号、20px 高、内边距 4px 9px大号标签为 14px 字号、28px 高、内边距 4px 12pxTags.jsxBorder radius标签圆角默认8Padding容器内边距default默认或none无Box shadow容器阴影默认0px 0px 0px 0px #00000040Alignment标签对齐方式left默认、center、right。这些样式项的实际生效逻辑见 Tags.jsx当溢出模式为wrap时justifyContent依据对齐方式在flex-start/center/flex-end间切换禁用状态下组件透明度降为 0.5 且指针事件关闭。小结ToolJet 的 Tags 组件是一个结构清晰、配置灵活的数组展示组件。核心要点可归纳为数据格式{{ [{ title, color, textColor }, ...] }}对象数组表达式是使用该组件的基础模式选择静态模式下逐条配置选项动态模式下用 Schema 表达式绑定数据能力边界v2.50.0-LTS 下无 CSA、无暴露变量控制交互需依赖布局开关Show on desktop/mobile与样式开关Visibility实现视觉定制通过 Size、Border radius、Alignment、Overflow 等样式与行为项可适配状态标签、分类标记等多种展示需求。组件配置的完整字段定义可参考 widgets/tags.js运行时渲染与状态处理可参考 Widgets/Tags/Tags.jsx属性面板交互实现可参考 RightSideBar/Inspector/Components/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），仅供参考