ToolJet Vertical Divider 组件完全指南属性配置、样式控制与源码实现解析【免费下载链接】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/ToolJetVertical Divider垂直分隔线是 ToolJet 应用编辑器中用于在相邻组件之间建立清晰视觉分隔的基础布局组件。本文基于官方文档与前端源码系统讲解该组件的添加方式、属性配置、样式选项与底层渲染机制帮助你用它组织页面结构、提升信息可读性。组件概览Vertical Divider组件通过添加一条垂直方向的细线将两个相邻组件分隔开来。它的典型用途包括增强布局结构区分功能区与内容区在表格、表单或详情页中分隔不同字段分组在侧边栏与主内容之间建立明确的视觉边界替代边框或间距实现更轻量的区块划分。与横向 Divider 组件不同Vertical Divider 只渲染一条垂直方向的分隔线不支持文字标签横向 Divider 支持label属性而 Vertical Divider 的配置中没有任何 label 相关字段。它专注于“窄而高”的垂直分隔场景在源码中其默认尺寸为宽 1px × 高 100px见 verticalDivider.js 中的defaultSize。添加组件Vertical Divider 与 Divider 同属Presentation演示类组件。在组件管理器Component Manager中展开Presentation分组即可找到Vertical divider源码分组见 sectionConfig.js 中的presentation.valueSet。它同时被收录在NEW_REVAMPED_COMPONENTS重构组件列表中见 componentTypes.js并通过 widgetConfig.js 与 widgets/index.js 注册到组件系统中。组件配置的核心定义集中在 verticalDivider.js其displayName为 Vertical dividerdescription为 Vertical line separator。组件特定动作CSA与暴露变量Component Specific Actions (CSA)Vertical Divider 目前没有实现任何组件特定动作CSA。这意味着它不提供如setVisibility、setText之类的专属控制方法无法通过事件处理器或自定义脚本直接调用组件级动作来控制它。Exposed Variables暴露变量该组件同样不暴露任何变量。在右侧检查器Inspector中无法读取到它的运行时状态值因此不能在其他组件的表达式中通过{{components.verticalDivider1.xxx}}引用它的数据。如果你需要按条件控制分隔线是否显示请使用下方Visibility属性配合fx动态表达式实现详见样式与动态配置一节。通用属性Tooltip 提示文本在General通用折叠面板下可以设置组件的Tooltip输入值为字符串格式设置后鼠标悬停在组件上时会显示该字符串作为提示气泡用于向最终用户补充说明该分隔线所在区域的用途。在源码层面Tooltip 实际拆分为两个配置项见 verticalDivider.js 的properties区块配置项类型说明tooltipFormatswitch提示文本的渲染格式可选Plain text纯文本、Markdown、HTML默认plainTexttooltipcode提示内容本身默认值为Tooltip text占位符为 Enter tooltip textTooltip 的实际渲染由 RenderWidget.jsx 统一处理它会根据tooltipFormat选择对应的渲染器并在内容非空trim()后不为空时挂载提示层。因此若想彻底移除提示应清空tooltip内容而非仅切换格式。设备可见性Devices在Devices区块可以控制组件在不同设备视图下的显示属性说明配置方式Show on desktop控制组件在桌面端视图中是否可见使用开关按钮切换或点击fx输入逻辑表达式动态配置Show on mobile控制组件在移动端视图中是否可见使用开关按钮切换或点击fx输入逻辑表达式动态配置从源码定义看两者的默认值分别为showOnDesktop: {{true}}、showOnMobile: {{false}}即默认仅在桌面端显示。这意味着在移动端预览中分隔线默认会被隐藏适合需要避免小屏布局拥挤的场景。样式配置StylesVertical Divider 的样式配置集中在右侧属性面板的Styles区块。官方文档给出的属性如下属性说明配置选项Divider Color设置分隔线的颜色接受任意合法颜色值十六进制如#000000、RGB、预定义颜色名Visibility控制分隔线是否可见可设为true或false或点击fx输入逻辑表达式动态配置Box Shadow为分隔线添加阴影以营造层次感接受 box-shadow 值如none、2px 4px 6px rgba(0, 0, 0, 0.1)源码确认的补充样式项结合组件配置源码verticalDivider.js 的styles区块实际可用的样式项还包括配置项类型默认值说明dividerColorcolorSwatchesvar(--cc-default-border)分隔线颜色跟随主题默认边框色变量dividerStyleswitchsolid分隔线样式可选solid实线或dashed虚线boxShadowboxShadow0px 0px 0px 0px #00000040阴影值默认无阴影paddingswitchdefault容器内边距可选default或none其中Stylesolid / dashed与PaddingDefault / None是官方文档未列出的两个实用选项虚线风格适合需要弱化视觉强度的场景Padding: None则可以让分隔线紧贴组件边缘。:::info 官方文档特别提示任何带有fx按钮的属性都可以通过编程方式表达式动态配置。例如将 Visibility 设为{{globals.currentUser.groups.includes(admin)}}即可实现仅对特定用户组显示分隔线的效果。 :::渲染实现原理Vertical Divider 的渲染组件位于 VerticalDivider.jsx其实现有几个值得注意的细节结构外层容器justify-content-center撑满宽高width: 100%; height: 100%内部是宽度固定为1px、高度为100%的线条元素可见性由properties.visibility决定外层display为flex还是none颜色自适应暗色模式当dividerColor为空字符串或等于#000/#000000时渲染层会自动切换为darkMode ? #fff : #000见 VerticalDivider.jsx保证分隔线在暗色主题下依然清晰可见虚线实现dividerStyle dashed时通过linear-gradient(to bottom, color 4px, transparent 4px)配合backgroundRepeat: repeat-y实现垂直方向的虚线效果其中虚线块与间隙长度均为常量DASH_WIDTH 4、DASH_GAP 4像素实线实现dividerStyle solid时使用backgroundColor直接填充并设置border: none避免双重描边阴影boxShadow直接透传到线条元素的内联样式上。对比横向 Divider.jsx 可以看到两者的虚线实现方向不同横向分隔线使用repeat-x的横向渐变而垂直分隔线使用repeat-y的纵向渐变常量值保持一致。实战建议信息分组在表单或仪表盘中用垂直分隔线在相邻的输入框、按钮组之间建立分组边界避免字段混淆配合设备属性移动端布局较窄时默认的Show on mobile: false可自动隐藏分隔线避免挤占横向空间如确需保留可在移动端改用更浅的颜色值动态显隐利用 Visibility 的fx表达式结合应用状态如{{table1.selectedRow ! undefined}}实现选中行才显示分隔区的条件布局风格统一虚线dashed更适合需要弱化边界的分隔场景实线solid适合明确的区块划分如需更深层次感可叠加2px 4px 6px rgba(0, 0, 0, 0.1)这类轻阴影。小结Vertical Divider 是一个零交互、纯视觉的轻量布局组件它没有 CSA、不暴露变量全部能力集中在设备可见性、颜色/样式/阴影等样式配置上。理解其源码实现1px 宽线条、暗色模式自动取反、4px 虚线算法有助于你在深色主题与响应式布局下准确预测其表现并借助fx动态表达式将分隔线纳入应用的响应式逻辑之中。【免费下载链接】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），仅供参考