Graylog Web 界面 SegmentedControl 组件：从基础用法到源码级原理与实践

日志分析运维观测【免费下载链接】graylog2-serverFree and open log management项目地址https://gitcode.com/gh_mirrors/gr/graylog2-server点击查看免费下载导读本文围绕 SegmentedControl 组件文档 展开系统讲解 Graylog Web 界面graylog2-web-interface中SegmentedControl分段控件的完整使用方式。它是在 Graylog 前端中被广泛使用的单选式切换控件典型场景包括 Index Set Template 的 Data Tiering 与 Legacy 保留策略切换、Data Node 日志的 STDOUT/STDERR 视图切换、节点类型过滤等。阅读本文后你将掌握该组件的全部 Props、默认值、禁用粒度控制、受控与非受控用法并通过源码剖析理解其如何封装 Mantine 组件并与 Graylog 主题体系集成进而在自己的页面上正确复用该组件。SegmentedControl 是什么SegmentedControl是 Graylog Web 界面 bootstrap 组件库 中的一个单选切换控件它把一组互斥的选项以「分段」形式排成一行当前选中项以高亮背景标记用户点击即可切换选中值。相比下拉菜单分段控件让所有可选项始终可见交互路径更短非常适合 24 个选项之间的切换场景。组件文档位于 SegmentedControl.md底层实现为 SegmentedControl.tsx。后者本质上是基于 Mantinemantine/core的SegmentedControl的一层薄封装目的是把选项颜色、圆角、字体排版等外观统一纳入 Graylog 自己的主题体系同时保持 TSX 组件的 API 简洁一致。基础用法Default最基础的使用方式是为data属性传入一组选项对象每个对象至少包含value与label两个字段。value是该选项对应的取值label是展示给用户的文本。文档给出的默认示例为SegmentedControl data{[ { value: aloho, label: Aloho, }, { value: lumos, label: Lumos, }, ]} /渲染结果为一行包含「Aloho」「Lumos」两个分段的选择器。此时组件处于非受控模式未显式传入value与onChange由组件内部自行维护当前选中项用户点击切换即可生效。整体禁用Disabled当需要让整个控件不可交互例如表单尚未满足前置条件或该功能对当前用户不可用时传入布尔属性disabledSegmentedControl data{[ { value: aloho, label: Aloho, }, { value: lumos, label: Lumos, }, ]} disabled /从源码看disabled的默认值为false见 SegmentedControl.tsx传入后会被原样透传给底层 Mantine 组件所有分段的点击与键盘交互均被禁用。单选项禁用Single option disabled除了整体禁用data中的每个选项对象还支持独立的disabled: true标记实现「单个分段置灰、其余选项仍可点击」的精细控制SegmentedControl data{[ { value: aloho, label: Aloho, }, { value: mora, label: Mora, disabled: true, }, { value: lumos, label: Lumos, }, ]} /此例中「Mora」分段置灰不可选但「Aloho」与「Lumos」仍然可正常切换。该能力来自选项对象的类型定义源码中data被声明为ArraySegmentedControlItem { value: OptionValue }SegmentedControl.tsx其中SegmentedControlItem是 Mantine 提供的选项类型除value、label外还包含可选的disabled字段由 Mantine 底层完成禁用状态渲染与交互拦截。Props 全量与默认值综合 SegmentedControl.tsx 中Props类型定义与组件解构默认值该组件的完整接口如下Prop类型默认值说明dataArraySegmentedControlItem { value: OptionValue }必填选项数组每项至少含value、label可含disabledvalueOptionValueundefined受控模式下当前选中值defaultValuestringundefined非受控模式下初始选中值onChange(value: OptionValue) voidundefined选中值变化时的回调disabledbooleanfalse是否整体禁用radiusMantineRadiusxs分段控件圆角大小colorinfo \| warning \| danger \| success \| primary \| defaultinfo选中项高亮颜色取值对应 Graylog 主题的 variant 色板autoContrastbooleanfalse是否依据背景自动计算高亮前景对比色classNamestringundefined透传给根元素的 CSS 类名组件本身是一个泛型组件签名形如SegmentedControlOptionValue extends string在调用时可以通过SegmentedControlNodeType ...这样的语法把OptionValue绑定到具体的联合类型从而让data中每项的value、onChange回调参数获得精确的静态类型约束仓库中大量页面正是这么用的见下文。源码级原理Mantine 封装与主题集成SegmentedControl.tsx 的实现非常精简通过useThemestyled-components读取当前 Graylog 主题将color属性映射为theme.colors.variant[color]再透传给 Mantine 的SegmentedControlMantineSegmentedControl color{theme.colors.variant[color]} autoContrast{autoContrast} className{className} data{data} defaultValue{defaultValue} radius{radius} disabled{disabled} value{value} onChange{onChange} styles{{ label: { marginBottom: 0 } }} /这段实现揭示了三个关键设计颜色体系统一外层组件不接受任意 CSS 颜色字符串而是限定为info / warning / danger / success / primary / default六种语义变体再转换为主题色板保证全站分段控件与 Graylog 的品牌色一致。受控与非受控双模式value、onChange与defaultValue同时被支持可无缝适配 Formik 表单受控与简单的内部状态切换非受控两类场景。排版微调通过styles{{ label: { marginBottom: 0 } }}重置 Mantine 默认的 label 间距使其在 Graylog 的密集表单布局中排版更协调。泛型与受控模式的典型实践分段控件最常见的实战形态是「受控 泛型」即由父组件通过useState维护当前选中值并把value与onChange双向绑定。仓库中的代表性用法包括Data Node 日志视图切换DataNodeLogsDialog.tsx 中定义type LogsType stdout | stderr通过SegmentedControlLogsType data{LogsTypeSegments} value{logsType} onChange{setLogsType} /切换日志输出流随后根据选中值渲染logs[logsType]对应的日志内容。节点类型过滤ClusterConfigurationNodes.tsx 使用SegmentedControlNodeType value{activeNodeType} data{nodeTypeOptions} onChange{(value) setActiveNodeType(value)} /在全部节点 / Graylog 节点 / 数据节点之间过滤列表。Index Set Template 保留策略切换TemplateForm.tsx 定义type RetentionConfigSegment data_tiering | legacy用SegmentedControlRetentionConfigSegment data{retentionConfigSegments} value{selectedRetentionSegment} onChange{setSelectedRetentionSegment} /在「Data Tiering」与「Legacy (Deprecated)」两套索引配置表单间切换并配合 Formik 校验联动validate(values, selectedRetentionSegment legacy)。欢迎页指标页签WelcomeMetricsSection.tsx 把分段控件放在 Overview 区块的headerActions中动态构建tabsGeneral 与各插件指标项作为data作为指标视图的页签切换器。Data Node 升级方式选择UpgradeMethodSelector.tsx 使用SegmentedControl data{UpgradeMethodSegments} value{upgradeMethod} onChange{onChange} /让用户选择升级方式。这些用例覆盖了「分段切换数据视图」「表单分段选择」「页签式内容切换」三类典型交互可以视为编写新页面时参考的成熟模式。更完整的调用清单可通过在仓库中搜索SegmentedControl获得相关文件还包括 FleetDetail.tsx、AddOutputButton.tsx、UserDetails.tsx、IndexSetRotationRetentionConfigurationSection.tsx 等。使用建议与注意事项选项数量分段控件适合 24 个短文本选项若选项过多或文案较长建议改用下拉菜单如 bootstrap 组件库中的DropdownButton避免横向空间被撑爆。类型安全优先以SegmentedControlUnionType ...的泛型写法声明选项值类型onChange的回调参数即可获得自动补全与类型检查。禁用优先级整体disabled与单选项disabled: true可同时存在单选项禁用主要用于「当前条件下该选项不可选但仍向用户展示其存在」的场景。表单集成受控模式下将value与onChange接入 Formik 的Field/setFieldValue即可color与radius可按需调整视觉但建议保持默认的info与xs以维持全站一致性。小结SegmentedControl是 Graylog Web 界面中一个轻量但高频使用的单选切换组件文档侧提供了 Default、Disabled、单选项禁用三个基础用法源码侧则通过泛型、语义化颜色与 Mantine 封装使其同时满足表单受控、状态切换、页签导航等多种场景。无论是阅读 SegmentedControl.md 学习 API还是对照 SegmentedControl.tsx 理解实现或是参考上文的真实调用案例你都可以快速在自己的页面中落地这一交互模式。赞分享日志分析运维观测【免费下载链接】graylog2-serverFree and open log management项目地址https://gitcode.com/gh_mirrors/gr/graylog2-server点击查看免费下载相关推荐Graylog Web 界面 Drawer 组件详解从基础用法到嵌套侧边栏实现Graylog Web 界面 Drawer 组件详解从基础用法到嵌套侧边栏实现 Graylog Web 前端基于 React 构建了一套完整的通用组件库位于日志分析运维观测Graylog Web 界面 Panel 组件实战指南从基础用法到折叠面板与废弃 API 迁移Graylog Web 界面 Panel 组件实战指南从基础用法到折叠面板与废弃 API 迁移 导读 本文围绕 Graylog 开源项目 Web 界面gra日志分析运维观测rsuite AutoComplete 组件入门与实践从基础用法到源码级原理解析rsuite AutoComplete 组件入门与实践从基础用法到源码级原理解析 本文以 rsuite 文档库中 AutoComplete 组件的默认用法片段前端UI组件上一篇如何为地图应用添加Supertonic实时语音导航功能终极集成指南下一篇Epic框架完全指南Android ART运行时AOP Hook的终极解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考