37 lines
1.1 KiB
Plaintext
37 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
title: Devtool
|
||
|
|
description: Inspect and edit catalogs from a floating development interface.
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: mount-the-devtool
|
||
|
|
title: Mount the Devtool
|
||
|
|
- id: theme-and-language
|
||
|
|
title: Theme and language
|
||
|
|
- id: custom-surfaces
|
||
|
|
title: Custom surfaces
|
||
|
|
---
|
||
|
|
|
||
|
|
## Mount the Devtool {#mount-the-devtool}
|
||
|
|
|
||
|
|
Mount the Devtool inside `I18nProvider` and only during development:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { I18nDevtool } from "@workspace/i18n/devtool"
|
||
|
|
|
||
|
|
{
|
||
|
|
import.meta.env.DEV && (
|
||
|
|
<I18nDevtool locale="zh-Hans" dark={'[data-theme="dark"]'} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The component renders through a portal, so application overflow and stacking contexts do not clip it.
|
||
|
|
|
||
|
|
## Theme and language {#theme-and-language}
|
||
|
|
|
||
|
|
The `dark` option accepts a class name or a CSS selector. Control-panel language is independent from the translated application locale, supports `en-US` and `zh-Hans`, and falls back from `navigator.languages` to `en-US`.
|
||
|
|
|
||
|
|
## Custom surfaces {#custom-surfaces}
|
||
|
|
|
||
|
|
Use `MessagePanel`, `MessageRepositoryProvider`, and `createHttpMessageRepository` when the application needs a custom development interface instead of the default floating panel.
|