Maofeng
48 lines
1.0 KiB
Plaintext
48 lines
1.0 KiB
Plaintext
---
|
||
title: 安装与接入
|
||
description: 添加 Search、注册翻译目录并挂载搜索界面。
|
||
order: 10
|
||
toc:
|
||
- id: add-the-package
|
||
title: 添加包
|
||
- id: import-styles
|
||
title: 导入样式
|
||
- id: mount-search
|
||
title: 挂载搜索
|
||
---
|
||
|
||
## 添加包 {#add-the-package}
|
||
|
||
将 Search 加入应用依赖：
|
||
|
||
```json
|
||
{
|
||
"dependencies": {
|
||
"@workspace/search": "workspace:*"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 导入样式 {#import-styles}
|
||
|
||
在应用的全局样式入口导入一次 Search 样式，使 Tailwind 扫描包内使用的 utilities：
|
||
|
||
```css
|
||
@import "@workspace/search/globals.css";
|
||
```
|
||
|
||
同时将 `@workspace/search/locales/{locale}` 加入应用的国际化目录来源。
|
||
|
||
## 挂载搜索 {#mount-search}
|
||
|
||
```tsx
|
||
import { SearchDialog, SearchProvider, SearchTrigger } from "@workspace/search"
|
||
|
||
;<SearchProvider adapter={searchAdapter} onSelect={openResult}>
|
||
<SearchTrigger>搜索</SearchTrigger>
|
||
<SearchDialog />
|
||
</SearchProvider>
|
||
```
|
||
|
||
`SearchDialog` 默认注册 `Mod+K`。如果应用已经统一管理快捷键，可以传入 `hotkey={false}`。
|