Maofeng
50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
---
|
|
title: 外观设置弹窗
|
|
description: 组合触发器、控制器和快捷键得到完整的外观设置流程。
|
|
order: 1
|
|
toc:
|
|
- id: controller
|
|
title: 挂载控制器
|
|
- id: trigger
|
|
title: 添加触发器
|
|
- id: custom-handle
|
|
title: 独立弹窗实例
|
|
---
|
|
|
|
## 挂载控制器 {#controller}
|
|
|
|
在应用共享的 `PreferencesProvider` 内挂载一次 `AppearanceController`。它组合默认设置内容，并注册 `Mod+,` 打开弹窗和 `Mod+D` 切换主题。
|
|
|
|
```tsx
|
|
<PreferencesProvider
|
|
effects={[appearancePreferenceEffect]}
|
|
initialPreferences={preferences}
|
|
>
|
|
<AppearanceController />
|
|
<App />
|
|
</PreferencesProvider>
|
|
```
|
|
|
|
## 添加触发器 {#trigger}
|
|
|
|
`AppearanceDialogTrigger` 可以放在用户菜单、设置按钮或命令面板中。默认情况下，它会连接到默认控制器使用的 handle。
|
|
|
|
```tsx
|
|
<AppearanceDialogTrigger render={<button type="button" />}>
|
|
界面外观
|
|
</AppearanceDialogTrigger>
|
|
```
|
|
|
|
## 独立弹窗实例 {#custom-handle}
|
|
|
|
页面中需要隔离的外观弹窗时，为控制器和触发器传入同一个新 handle。
|
|
|
|
```tsx
|
|
const handle = createAppearanceDialogHandle()
|
|
|
|
<AppearanceDialogTrigger handle={handle} render={<button type="button" />}>
|
|
打开主题设置
|
|
</AppearanceDialogTrigger>
|
|
<AppearanceController handle={handle} />
|
|
```
|