StyleButton

在 SnowUI 与 Apple 两种视觉风格之间切换，适合提供界面风格选择的入口。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于切换支持的视觉风格；明暗模式使用 ColorSchemeButton。它不意味着可以通过一个按钮改变任意组件私有样式。

bind:mode 同步风格，defaultMode 提供初始模式。
默认把模式应用到文档；局部控制使用 applyToDocument=false，不提供 children 时使用纯图标布局。

导入

import { StyleButton } from '@snowui-design-system/components';

用法

变体

API 参考

属性	类型	默认值	示例	描述
`mode`	`SnowUIStyleMode`	`—`	`mode={value}`	当前视觉风格，支持 bind:mode。挂载时优先于 defaultMode；点击更新该值，同步页面属性时也会跟随根节点变化。
`defaultMode`	`SnowUIStyleMode`	`—`	`defaultMode={value}`	挂载时的非受控初值；mode 优先。均未提供时读取页面根节点；applyToDocument=false 时回退为 snowui。
`applyToDocument`	`boolean`	`true`	`applyToDocument`	将当前状态同步到 document.documentElement：mode="ios"；SnowUI 时移除 mode。false 时不读写或观察页面属性，由调用方处理主题目标；不写入 storage。
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	覆盖按钮的可访问名称；默认描述点击后切换到的状态，跟随 LocaleProvider。
`snowuiLogo`	`Snippet`	`—（内置图形）`	`snowuiLogo={snowuiLogoContent}`	替换当前为 snowui 时显示的 SnowUI Logo。仅改变图形，不接管切换逻辑。
`appleLogo`	`Snippet`	`—（内置图形）`	`appleLogo={appleLogoContent}`	替换当前为 apple 时显示的 Apple Logo。仅改变图形，不接管切换逻辑。
`children`	`Snippet`	`—`	`<StyleButton>Content</StyleButton>`	显示在状态图形之后的自定义内容；未提供时宿主 Button 自动使用 iconOnly 布局。
`disabled`	`boolean`	`false`	`disabled`	禁用按钮操作；不会阻止外部绑定值或页面属性的同步。
`onModeChange`	`(mode: SnowUIStyleMode) => void`	`—`	`onModeChange={(value) => { /* handle value */ }}`	用户点击切换后接收新值；初始化、外部赋值及页面属性观察同步不会调用此回调。
`onclick`	`(event: MouseEvent) => void`	`—`	`onclick={(value) => { /* handle value */ }}`	有效点击时先调用，再执行状态切换；当前实现不会以 preventDefault() 取消后续切换。disabled 时不调用。