Label Studio Collapse 标签完全指南用可折叠面板组织高密度标注界面【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio导读Label Studio 的Collapse标签用于创建可折叠、可展开的内容区域帮助标注员在复杂的标注界面中隐藏非关键信息、聚焦当前任务。本文基于 Collapse 标签官方文档 与 参数说明文档结合编辑器前端源码完整讲解Collapse与Panel的配置语法、三个核心参数accordion、bordered、open的行为语义以及手风琴模式、默认展开状态控制等实战技巧。读完本文你将能够在 Label Studio 的标注配置Labeling Config中自由编排可折叠的内容布局。Collapse 标签是什么Collapse是 Label Studio 可视化标签体系中的布局Visual类标签用于定义一块可以被折叠和展开的内容区域。在标注界面信息密度过高时例如同时展示任务说明、参考文档、预标注结果和多个输入控件使用 Collapse 可以把次要内容收纳起来让标注员按需展开查看。它在标签体系中的定位属于容器而非控制或对象标签——它本身不产生标注结果Region只负责组织页面结构。从源码看它被注册在 web/libs/editor/src/tags/visual/index.js 的 Visual 类别中与View、Header、Style、Filter等布局标签并列。最小可用示例原文档给出的基础示例展示了 Collapse 与 Panel 的组合用法Collapse Panel valuePanel Header ViewHeader valueHello world //View /Panel /Collapse这个配置会渲染出一个带标题栏的折叠面板标题为Panel Header面板内显示Hello world标题文本默认处于折叠状态点击标题栏即可展开内容。参数说明三个核心属性原文档在 参数说明 中给出了Collapse的完整参数表如下ParamTypeDefaultDescription[accordion]booleantrueWorks as an accordion以手风琴模式工作[bordered]stringfalseShows border显示边框[open]booleanfalseSets default collapsed state设置默认折叠状态accordion手风琴模式accordion默认值为true。手风琴模式的含义是同一时刻只允许展开一个面板展开新的面板会自动收起之前的面板从而在多个 Panel 并存时保持界面紧凑。设置为false后多个面板可以同时展开、互不影响。从 源码实现 可以印证这一行为accordion: types.optional(types.boolean, true)默认 true且渲染时会先计算所有应展开的面板再在手风琴模式下只保留第一个展开项// For accordion mode, only the first active key should be used const finalActiveKeys item.accordion ? defaultActiveKeys.length 0 ? [defaultActiveKeys[0]] : [] : defaultActiveKeys;也就是说手风琴模式下即使你给多个面板配置了默认展开界面也只会展开第一个。bordered边框显示bordered的默认值为false即默认不显示外边框面板之间仅通过标题栏分隔。设置为true或任意非空值源码中类型为boolean后Collapse 容器会绘制整体边框使折叠区域与页面的其他部分在视觉上区分开来。该值直接透传给底层渲染组件Collapse bordered{item.bordered} accordion{item.accordion} defaultActiveKey{finalActiveKeys}open默认展开状态open的默认值为false即所有面板默认折叠。设置为true后面板在标注界面首次加载时即为展开状态。值得说明的是open是一个默认态属性——它只决定初始渲染状态标注员随后仍可自由折叠或展开。在源码中open: types.maybeNull(types.boolean)并且Collapse 级与 Panel 级都存在 open 属性二者存在优先级关系// Global open sets the base state for all panels // Local open can override the global state for individual panels const defaultActiveKeys visibleChildren.filter((panel) panel.open ?? item.open).map((c) panel-${c.value});即Panel 自身的open优先于 Collapse 级open当某个 Panel 未声明open时才回退使用 Collapse 的全局open值。深入源码Collapse 的实现原理基于 Ant Design Collapse 的封装web/libs/editor/src/tags/visual/Collapse.jsx 是 Collapse 标签的完整实现。它直接复用了antd的Collapse与Collapse.Panel组件通过 Label Studio 的标签注册机制Registry.addTag接入标签系统import { Collapse } from antd; const { Panel } Collapse; // ... Registry.addTag(panel, types.compose(PanelModel, PanelModel, ProcessAttrsMixin), () {}); Registry.addTag(collapse, CollapseModel, HtxCollapse);其中CollapseModel types.compose(CollapseModel, AnnotationMixin, Model, ProcessAttrsMixin)意味着 Collapse 通过AnnotationMixin与标注上下文annotation打通内部子标签可以正常访问当前任务的标注数据。Panel 支持的内容类型PanelModel的children定义在源码中以白名单形式列出从中可以直观看到 Panel 内可以放置的标签类型非常广泛包括布局与文本view、header、style、list、filter对象数据text、image、audio、audioplus、hypertext、pdf、video、timeseries、paragraphs、dialog、table、taxonomy标注控制labels、label、choices、choice、datetime、number、rating、ranker、textarea、relations、pairwise以及各类几何标签rectangle、ellipse、polygon、keypoint、brush、bitmask、vector、videorectangle、timelinelabels等自定义扩展custominterface以及通过Registry.customTags注册的自定义标签因此 Panel 既可以收纳说明性文本也可以承载完整的标注控件组这是用它构建折叠式标注工作台的基础。Panel 标题的取值逻辑Panel 的标题取自value属性源码中的回退逻辑为Panel key{panel-${c.value}} header{c._value || c.value || Panel ${index 1}} forceRender即优先使用处理后的_value其次使用原始value两者都为空时自动生成Panel 1、Panel 2这样的占位标题。value也可以使用$task_field形式绑定任务数据字段用于动态标题。另外 Panel 渲染时带有forceRender保证折叠状态下内部内容也会被渲染对统计 DOM 或需要预加载的组件有意义。isIndependent面板能否脱离数据独立存在源码中 Collapse 和 Panel 都实现了isIndependent视图get isIndependent() { return !!self.children?.some((c) { return c.isIndependent true; }); }它表示该面板在没有任何任务对象、任务数据或 Region 的情况下也能渲染。在批量标注模式annotation:bulk下Collapse 会据此过滤子面板只展示可独立存在的面板避免批量操作界面出现依赖单条任务数据的区域const visibleChildren item.children.filter((i) i.type panel (!isBulkMode || i.isIndependent));这意味着如果你希望在批量标注时仍显示某个面板应确保其内部子标签是可独立渲染的如纯文本、说明性控件。实战配置示例1. 多面板 非手风琴模式需要同时展开多个区域时将accordion设为falseCollapse accordionfalse Panel valueTask Instructions ViewHeader valueAnnotation Guidelines //View ViewText nameinstructions value$instructions //View /Panel Panel valueReference Material ViewText namereference value$reference //View /Panel /Collapse2. 默认展开第一个面板通过 Collapse 级opentrue让所有面板默认展开或通过 Panel 级open精准控制单个面板Collapse borderedtrue opentrue Panel valuePrimary Task View Text namecontent value$content / Choices namesentiment toNamecontent Choice valuePositive / Choice valueNegative / /Choices /View /Panel !-- 此面板显式覆盖全局 open保持折叠 -- Panel valueAdvanced Options openfalse ViewText namenotes value$notes //View /Panel /Collapse根据前文所述的优先级逻辑openfalse的 Panel 会覆盖 Collapse 级opentrue最终只有第一个面板默认展开。3. 嵌套 CollapsePanelModel的子标签白名单中包含collapse因此 Collapse 可以嵌套使用适合对多层级说明内容进行分组收纳Collapse Panel valueSection A Collapse Panel valueSub-section A-1 ViewHeader valueNested content //View /Panel /Collapse /Panel /Collapse4. 在批量标注场景中固定展示说明结合源码中isIndependent与批量模式的过滤逻辑若希望面板在批量标注界面始终可见应保证面板内容不依赖具体任务对象Collapse accordiontrue opentrue Panel valueGeneral Guidelines View Header valueLabeling Rules / Stylep { font-size: 12px; }/Style Text valueAlways label entities precisely. / /View /Panel /Collapse相关模板与文档线索仓库文档中多处模板与指南实际使用了 Collapse 类折叠交互react_claims.md基于ReactCode的自定义界面中将 Agent 执行轨迹渲染为可折叠的树状结构并内置可折叠的用户提问与追问会话区是 Collapse 交互模式在可编程界面Programmable UI中的典型延伸。其余模板 video_object_detector.md、react_spreadsheet.md、generative-llm-ranker.md、multi_turn_chat.md、llm_rag_human_feedback.md 中也出现了 Collapse/collapse 字样说明折叠式布局被广泛用于对话、生成式标注等复杂界面。批量标注指南 中批量标注界面同样借助折叠式布局组织设置项与本标签的设计目标一致。使用建议与注意事项默认手风琴accordion默认开启若多个面板需要同时展开务必显式设置accordionfalse否则会出现展开 A 后 B 自动收起的现象。open 是初始态open只决定首屏渲染状态无法锁定面板标注员仍可手动切换。优先级规则Panel 级open覆盖 Collapse 级open手风琴模式下即使多个面板声明默认展开也只保留第一个。标题必填建议虽然未设置value时会自动生成占位标题Panel 1等但建议始终显式提供语义化标题提升标注员的使用效率。批量模式过滤在启用了annotation:bulk的批量标注流程中依赖任务数据的面板可能被过滤隐藏如需固定展示请使用可独立渲染的内容。嵌套有度Collapse 支持嵌套但层级过深会降低标注界面的可读性建议控制在两层以内。总结Collapse是 Label Studio 标签体系中组织高密度标注界面的核心布局标签通过accordion控制手风琴行为、bordered控制视觉边界、open控制默认展开状态配合支持大量子标签的Panel即可将说明文本、参考数据和标注控件分层收纳。结合 源码实现 中基于 Ant Design 的封装、Panel 级 open 优先的展开逻辑与批量标注模式过滤机制你可以精准设计出既紧凑又高效的标注工作台。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio Collapse 标签完全指南：用可折叠面板组织高密度标注界面
Label Studio Collapse 标签完全指南用可折叠面板组织高密度标注界面【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio导读Label Studio 的Collapse标签用于创建可折叠、可展开的内容区域帮助标注员在复杂的标注界面中隐藏非关键信息、聚焦当前任务。本文基于 Collapse 标签官方文档 与 参数说明文档结合编辑器前端源码完整讲解Collapse与Panel的配置语法、三个核心参数accordion、bordered、open的行为语义以及手风琴模式、默认展开状态控制等实战技巧。读完本文你将能够在 Label Studio 的标注配置Labeling Config中自由编排可折叠的内容布局。Collapse 标签是什么Collapse是 Label Studio 可视化标签体系中的布局Visual类标签用于定义一块可以被折叠和展开的内容区域。在标注界面信息密度过高时例如同时展示任务说明、参考文档、预标注结果和多个输入控件使用 Collapse 可以把次要内容收纳起来让标注员按需展开查看。它在标签体系中的定位属于容器而非控制或对象标签——它本身不产生标注结果Region只负责组织页面结构。从源码看它被注册在 web/libs/editor/src/tags/visual/index.js 的 Visual 类别中与View、Header、Style、Filter等布局标签并列。最小可用示例原文档给出的基础示例展示了 Collapse 与 Panel 的组合用法Collapse Panel valuePanel Header ViewHeader valueHello world //View /Panel /Collapse这个配置会渲染出一个带标题栏的折叠面板标题为Panel Header面板内显示Hello world标题文本默认处于折叠状态点击标题栏即可展开内容。参数说明三个核心属性原文档在 参数说明 中给出了Collapse的完整参数表如下ParamTypeDefaultDescription[accordion]booleantrueWorks as an accordion以手风琴模式工作[bordered]stringfalseShows border显示边框[open]booleanfalseSets default collapsed state设置默认折叠状态accordion手风琴模式accordion默认值为true。手风琴模式的含义是同一时刻只允许展开一个面板展开新的面板会自动收起之前的面板从而在多个 Panel 并存时保持界面紧凑。设置为false后多个面板可以同时展开、互不影响。从 源码实现 可以印证这一行为accordion: types.optional(types.boolean, true)默认 true且渲染时会先计算所有应展开的面板再在手风琴模式下只保留第一个展开项// For accordion mode, only the first active key should be used const finalActiveKeys item.accordion ? defaultActiveKeys.length 0 ? [defaultActiveKeys[0]] : [] : defaultActiveKeys;也就是说手风琴模式下即使你给多个面板配置了默认展开界面也只会展开第一个。bordered边框显示bordered的默认值为false即默认不显示外边框面板之间仅通过标题栏分隔。设置为true或任意非空值源码中类型为boolean后Collapse 容器会绘制整体边框使折叠区域与页面的其他部分在视觉上区分开来。该值直接透传给底层渲染组件Collapse bordered{item.bordered} accordion{item.accordion} defaultActiveKey{finalActiveKeys}open默认展开状态open的默认值为false即所有面板默认折叠。设置为true后面板在标注界面首次加载时即为展开状态。值得说明的是open是一个默认态属性——它只决定初始渲染状态标注员随后仍可自由折叠或展开。在源码中open: types.maybeNull(types.boolean)并且Collapse 级与 Panel 级都存在 open 属性二者存在优先级关系// Global open sets the base state for all panels // Local open can override the global state for individual panels const defaultActiveKeys visibleChildren.filter((panel) panel.open ?? item.open).map((c) panel-${c.value});即Panel 自身的open优先于 Collapse 级open当某个 Panel 未声明open时才回退使用 Collapse 的全局open值。深入源码Collapse 的实现原理基于 Ant Design Collapse 的封装web/libs/editor/src/tags/visual/Collapse.jsx 是 Collapse 标签的完整实现。它直接复用了antd的Collapse与Collapse.Panel组件通过 Label Studio 的标签注册机制Registry.addTag接入标签系统import { Collapse } from antd; const { Panel } Collapse; // ... Registry.addTag(panel, types.compose(PanelModel, PanelModel, ProcessAttrsMixin), () {}); Registry.addTag(collapse, CollapseModel, HtxCollapse);其中CollapseModel types.compose(CollapseModel, AnnotationMixin, Model, ProcessAttrsMixin)意味着 Collapse 通过AnnotationMixin与标注上下文annotation打通内部子标签可以正常访问当前任务的标注数据。Panel 支持的内容类型PanelModel的children定义在源码中以白名单形式列出从中可以直观看到 Panel 内可以放置的标签类型非常广泛包括布局与文本view、header、style、list、filter对象数据text、image、audio、audioplus、hypertext、pdf、video、timeseries、paragraphs、dialog、table、taxonomy标注控制labels、label、choices、choice、datetime、number、rating、ranker、textarea、relations、pairwise以及各类几何标签rectangle、ellipse、polygon、keypoint、brush、bitmask、vector、videorectangle、timelinelabels等自定义扩展custominterface以及通过Registry.customTags注册的自定义标签因此 Panel 既可以收纳说明性文本也可以承载完整的标注控件组这是用它构建折叠式标注工作台的基础。Panel 标题的取值逻辑Panel 的标题取自value属性源码中的回退逻辑为Panel key{panel-${c.value}} header{c._value || c.value || Panel ${index 1}} forceRender即优先使用处理后的_value其次使用原始value两者都为空时自动生成Panel 1、Panel 2这样的占位标题。value也可以使用$task_field形式绑定任务数据字段用于动态标题。另外 Panel 渲染时带有forceRender保证折叠状态下内部内容也会被渲染对统计 DOM 或需要预加载的组件有意义。isIndependent面板能否脱离数据独立存在源码中 Collapse 和 Panel 都实现了isIndependent视图get isIndependent() { return !!self.children?.some((c) { return c.isIndependent true; }); }它表示该面板在没有任何任务对象、任务数据或 Region 的情况下也能渲染。在批量标注模式annotation:bulk下Collapse 会据此过滤子面板只展示可独立存在的面板避免批量操作界面出现依赖单条任务数据的区域const visibleChildren item.children.filter((i) i.type panel (!isBulkMode || i.isIndependent));这意味着如果你希望在批量标注时仍显示某个面板应确保其内部子标签是可独立渲染的如纯文本、说明性控件。实战配置示例1. 多面板 非手风琴模式需要同时展开多个区域时将accordion设为falseCollapse accordionfalse Panel valueTask Instructions ViewHeader valueAnnotation Guidelines //View ViewText nameinstructions value$instructions //View /Panel Panel valueReference Material ViewText namereference value$reference //View /Panel /Collapse2. 默认展开第一个面板通过 Collapse 级opentrue让所有面板默认展开或通过 Panel 级open精准控制单个面板Collapse borderedtrue opentrue Panel valuePrimary Task View Text namecontent value$content / Choices namesentiment toNamecontent Choice valuePositive / Choice valueNegative / /Choices /View /Panel !-- 此面板显式覆盖全局 open保持折叠 -- Panel valueAdvanced Options openfalse ViewText namenotes value$notes //View /Panel /Collapse根据前文所述的优先级逻辑openfalse的 Panel 会覆盖 Collapse 级opentrue最终只有第一个面板默认展开。3. 嵌套 CollapsePanelModel的子标签白名单中包含collapse因此 Collapse 可以嵌套使用适合对多层级说明内容进行分组收纳Collapse Panel valueSection A Collapse Panel valueSub-section A-1 ViewHeader valueNested content //View /Panel /Collapse /Panel /Collapse4. 在批量标注场景中固定展示说明结合源码中isIndependent与批量模式的过滤逻辑若希望面板在批量标注界面始终可见应保证面板内容不依赖具体任务对象Collapse accordiontrue opentrue Panel valueGeneral Guidelines View Header valueLabeling Rules / Stylep { font-size: 12px; }/Style Text valueAlways label entities precisely. / /View /Panel /Collapse相关模板与文档线索仓库文档中多处模板与指南实际使用了 Collapse 类折叠交互react_claims.md基于ReactCode的自定义界面中将 Agent 执行轨迹渲染为可折叠的树状结构并内置可折叠的用户提问与追问会话区是 Collapse 交互模式在可编程界面Programmable UI中的典型延伸。其余模板 video_object_detector.md、react_spreadsheet.md、generative-llm-ranker.md、multi_turn_chat.md、llm_rag_human_feedback.md 中也出现了 Collapse/collapse 字样说明折叠式布局被广泛用于对话、生成式标注等复杂界面。批量标注指南 中批量标注界面同样借助折叠式布局组织设置项与本标签的设计目标一致。使用建议与注意事项默认手风琴accordion默认开启若多个面板需要同时展开务必显式设置accordionfalse否则会出现展开 A 后 B 自动收起的现象。open 是初始态open只决定首屏渲染状态无法锁定面板标注员仍可手动切换。优先级规则Panel 级open覆盖 Collapse 级open手风琴模式下即使多个面板声明默认展开也只保留第一个。标题必填建议虽然未设置value时会自动生成占位标题Panel 1等但建议始终显式提供语义化标题提升标注员的使用效率。批量模式过滤在启用了annotation:bulk的批量标注流程中依赖任务数据的面板可能被过滤隐藏如需固定展示请使用可独立渲染的内容。嵌套有度Collapse 支持嵌套但层级过深会降低标注界面的可读性建议控制在两层以内。总结Collapse是 Label Studio 标签体系中组织高密度标注界面的核心布局标签通过accordion控制手风琴行为、bordered控制视觉边界、open控制默认展开状态配合支持大量子标签的Panel即可将说明文本、参考数据和标注控件分层收纳。结合 源码实现 中基于 Ant Design 的封装、Panel 级 open 优先的展开逻辑与批量标注模式过滤机制你可以精准设计出既紧凑又高效的标注工作台。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考