主题模式分段控制

概述

SThemeModeSegment 是一个绑定到当前 SConfigProvider 主题的上下文分段控制。它将 ThemeModePreference 的三种选项 —— auto（跟随系统 prefers-color-scheme）、light 与 dark —— 以图标为主的分段按钮呈现，让用户直接选择色彩方案偏好。适合在顶栏、设置面板或主题自定义器中一眼展示全部三种偏好。

用法

特性

🌓 三种选项 —— auto / light / dark，与主题 mode 类型一致
🎚 选择通过共享的主题上下文写入偏好
🎨 继承 Segment 的视觉属性（size / shape / fill 等），shape 默认为 rounded
🖼 方案图标（显示器 / 太阳 / 月亮）常驻显示；showLabel 控制是否在图标旁显示本地化标签（隐藏的标签仍保留可访问名称）

演示

Basic

100%

Auto / Light / Dark

API

Aria 层

ThemeModeSegment

15 属性

属性

属性名	类型	默认值	描述
showLabel	boolean	false	是否在方案图标旁边显示本地化标签。当 `false` 时，标签在视觉上保持隐藏，以便每个选项保留可访问的名称。
unmountOnHide	boolean	`true`	当值为 `true` 时，该元素将在关闭状态下被卸载。
class	ClassValue	—	应用于根元素的额外类名。
dir	Direction	—	项目之间的导航方向。
size	ThemeSize	—	组件的视觉尺寸。
fill	SegmentFill	—	填充。
shape	SegmentShape	—	组件的结构。
loop	boolean	false	键盘导航是否应循环往复
triggerProps	SegmentTriggerProps	—	转发给触发元素的属性。
orientation	DataOrientation	—	该组的取向。主要是为了确保箭头导航能据此正确进行（左右与上下）。
listProps	SegmentListProps	—	转发给列表元素的属性。
ui	Partial<SegmentUi>	—	该组件的按槽类重写。
enableIndicator	boolean	—	是否启用指示器。
indicatorProps	SegmentIndicatorProps	—	转发给 indicator 元素的属性。
activationMode	TabsActivationMode	automatic	Tab 键是自动激活（获得焦点时）还是手动激活（点击时）。

注意事项

适用范围

与 SThemeModeSelect、SThemeModeSwitch 类似，SThemeModeSegment 属于主题层组件，直接操作父级 SConfigProvider 的主题上下文。它不接受 modelValue；偏好由 provider 持有并在所有主题组件间共享。它是 SThemeModeSelect 的分段形态 —— 选项相同，无需下拉展开。

提醒

组件必须渲染在提供主题上下文的 SConfigProvider 内部，否则 useTheme 会抛出异常。
auto 是一种偏好 —— 实际解析后的方案（light / dark）仍取决于系统 prefers-color-scheme，并通过主题上下文的 effectiveMode 暴露。
items、modelValue 与 defaultValue 不对外暴露：选项列表固定，状态由主题上下文持有。

快速跳转

同分类组件