41 lines
1.1 KiB
Plaintext
41 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
title: 外观设置
|
||
|
|
description: 使用可持久化的主题、颜色和紧凑布局偏好完成应用。
|
||
|
|
order: 22
|
||
|
|
toc:
|
||
|
|
- id: provide-ui-state
|
||
|
|
title: 提供 UI 状态
|
||
|
|
- id: apply-preferences
|
||
|
|
title: 应用偏好
|
||
|
|
- id: add-locales
|
||
|
|
title: 添加词典
|
||
|
|
---
|
||
|
|
|
||
|
|
## 提供 UI 状态 {#provide-ui-state}
|
||
|
|
|
||
|
|
在应用根节点附近挂载 `UiStateProvider`。受控 Provider 可以通过变更处理器持久化每次状态更新。
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<UiStateProvider>
|
||
|
|
<AppearanceController />
|
||
|
|
<App />
|
||
|
|
<ThemeToggleButton />
|
||
|
|
</UiStateProvider>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 应用偏好 {#apply-preferences}
|
||
|
|
|
||
|
|
渲染一次 `AppearanceController`，使当前状态转换为文档类名和主题变量。`useUiState` 读取或更新单个偏好，`useResolvedTheme` 在解析系统模式后返回最终的亮色或暗色主题。
|
||
|
|
|
||
|
|
## 添加词典 {#add-locales}
|
||
|
|
|
||
|
|
只有应用使用这些控件时才添加外观词典：
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"catalogSources": ["@workspace/blocks/appearance/locales/{locale}"]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
至此应用外壳已经完成。其他功能也只需添加产品实际使用的 Block 词典。
|