Skip to content

Commit 416b1c7

Browse files
jikkaijikkai
committed
docs: add quote, shape, and enhanced table features docs
1 parent a6898b0 commit 416b1c7

41 files changed

Lines changed: 2646 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content/guides/docs/features/callout.ja-JP.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: コールアウト
3+
icon: '#pro/MessageSquareWarning'
4+
---
5+
6+
<MetaData
7+
lang="ja-JP"
8+
isPro
9+
meta={{
10+
plugins: [{
11+
client: '@univerjs-pro/docs-callout',
12+
facade: '@univerjs-pro/docs-callout/facade',
13+
}, {
14+
client: '@univerjs-pro/docs-callout-ui',
15+
locale: '@univerjs-pro/docs-callout-ui/locale/ja-JP',
16+
style: '@univerjs-pro/docs-callout-ui/lib/index.css',
17+
}],
18+
server: false,
19+
}}
20+
/>
21+
22+
コールアウト機能を使用すると、視覚的に際立ったブロックでドキュメント内の重要な情報を強調表示でき、アイコンや色のカスタマイズも可能です。
23+
24+
## はじめに
25+
26+
Univer Docs では、コールアウトブロックを使用して以下ができます：
27+
28+
- **重要な情報を強調**：重要なメモ、警告、ヒントに読者の注意を引きます。
29+
- **外観をカスタマイズ**：コンテンツに合わせて異なるアイコンや配色を選択します。
30+
- **コンテンツを整理**：視覚的に区切られたブロックでドキュメントを構造化します。
31+
32+
## プラグインモード
33+
34+
### インストール
35+
36+
```package-install
37+
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
38+
```
39+
40+
### 使用法
41+
42+
```typescript
43+
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout' // [!code ++]
44+
import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui' // [!code ++]
45+
import DocsCalloutUIJaJP from '@univerjs-pro/docs-callout-ui/locale/ja-JP' // [!code ++]
46+
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
47+
48+
import '@univerjs-pro/docs-callout-ui/lib/index.css' // [!code ++]
49+
50+
const univer = new Univer({
51+
locale: LocaleType.JA_JP,
52+
locales: {
53+
[LocaleType.JA_JP]: mergeLocales(
54+
DocsCalloutUIJaJP, // [!code ++]
55+
),
56+
},
57+
})
58+
59+
univer.registerPlugin(UniverDocsCalloutPlugin) // [!code ++]
60+
univer.registerPlugin(UniverDocsCalloutUIPlugin) // [!code ++]
61+
```
62+
63+
Univer の商用ライセンスをお持ちの場合は、[クライアントでのライセンス使用](/guides/pro/license#in-plugin-mode)を参照してください。
64+
65+
## Facade API
66+
67+
API を使用する前に facade をインポートしてください：
68+
69+
```typescript
70+
import '@univerjs-pro/docs-callout/facade'
71+
```
72+
73+
### すべてのコールアウトを取得
74+
75+
```typescript
76+
const doc = univerAPI.getActiveDocument()
77+
const callouts = doc?.getCallouts() ?? []
78+
```
79+
80+
### ID でコールアウトを取得
81+
82+
```typescript
83+
const doc = univerAPI.getActiveDocument()
84+
const callout = doc?.getCallout('callout-block-id')
85+
```
86+
87+
### コールアウトを挿入
88+
89+
```typescript
90+
const doc = univerAPI.getActiveDocument()
91+
const callout = doc?.insertCallout({
92+
startOffset: 12,
93+
endOffset: 35,
94+
config: { icon: '💡' },
95+
})
96+
```
97+
98+
### コールアウト設定を更新
99+
100+
```typescript
101+
const doc = univerAPI.getActiveDocument()
102+
doc?.updateCallout('callout-block-id', { icon: '⚠️' })
103+
```
104+
105+
### コールアウトアイコンを設定
106+
107+
```typescript
108+
const doc = univerAPI.getActiveDocument()
109+
doc?.setCalloutIcon('callout-block-id', '📝')
110+
```

‎content/guides/docs/features/callout.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Callout
3+
icon: '#pro/MessageSquareWarning'
4+
---
5+
6+
<MetaData
7+
lang="en-US"
8+
isPro
9+
meta={{
10+
plugins: [{
11+
client: '@univerjs-pro/docs-callout',
12+
facade: '@univerjs-pro/docs-callout/facade',
13+
}, {
14+
client: '@univerjs-pro/docs-callout-ui',
15+
locale: '@univerjs-pro/docs-callout-ui/locale/en-US',
16+
style: '@univerjs-pro/docs-callout-ui/lib/index.css',
17+
}],
18+
server: false,
19+
}}
20+
/>
21+
22+
The callout feature allows you to highlight important information in a document with visually distinct blocks, complete with customizable icons and colors.
23+
24+
## Introduction
25+
26+
In Univer Docs, callout blocks enable you to:
27+
28+
- **Highlight key information**: Draw attention to important notes, warnings, or tips.
29+
- **Customize appearance**: Choose from different icons and color schemes to match your content.
30+
- **Organize content**: Structure your document with visually separated sections.
31+
32+
## Plugin Mode
33+
34+
### Installation
35+
36+
```package-install
37+
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
38+
```
39+
40+
### Usage
41+
42+
```typescript
43+
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout' // [!code ++]
44+
import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui' // [!code ++]
45+
import DocsCalloutUIEnUS from '@univerjs-pro/docs-callout-ui/locale/en-US' // [!code ++]
46+
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
47+
48+
import '@univerjs-pro/docs-callout-ui/lib/index.css' // [!code ++]
49+
50+
const univer = new Univer({
51+
locale: LocaleType.EN_US,
52+
locales: {
53+
[LocaleType.EN_US]: mergeLocales(
54+
DocsCalloutUIEnUS, // [!code ++]
55+
),
56+
},
57+
})
58+
59+
univer.registerPlugin(UniverDocsCalloutPlugin) // [!code ++]
60+
univer.registerPlugin(UniverDocsCalloutUIPlugin) // [!code ++]
61+
```
62+
63+
If you have a commercial license for Univer, please refer to [Using License in Client](/guides/pro/license#in-plugin-mode) for configuration.
64+
65+
## Facade API
66+
67+
Make sure to import the facade before using the API:
68+
69+
```typescript
70+
import '@univerjs-pro/docs-callout/facade'
71+
```
72+
73+
### Get All Callouts
74+
75+
```typescript
76+
const doc = univerAPI.getActiveDocument()
77+
const callouts = doc?.getCallouts() ?? []
78+
```
79+
80+
### Get a Callout by ID
81+
82+
```typescript
83+
const doc = univerAPI.getActiveDocument()
84+
const callout = doc?.getCallout('callout-block-id')
85+
```
86+
87+
### Insert a Callout
88+
89+
```typescript
90+
const doc = univerAPI.getActiveDocument()
91+
const callout = doc?.insertCallout({
92+
startOffset: 12,
93+
endOffset: 35,
94+
config: { icon: '💡' },
95+
})
96+
```
97+
98+
### Update Callout Config
99+
100+
```typescript
101+
const doc = univerAPI.getActiveDocument()
102+
doc?.updateCallout('callout-block-id', { icon: '⚠️' })
103+
```
104+
105+
### Set Callout Icon
106+
107+
```typescript
108+
const doc = univerAPI.getActiveDocument()
109+
doc?.setCalloutIcon('callout-block-id', '📝')
110+
```

‎content/guides/docs/features/callout.zh-CN.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: 标注块
3+
icon: '#pro/MessageSquareWarning'
4+
---
5+
6+
<MetaData
7+
lang="zh-CN"
8+
isPro
9+
meta={{
10+
plugins: [{
11+
client: '@univerjs-pro/docs-callout',
12+
facade: '@univerjs-pro/docs-callout/facade',
13+
}, {
14+
client: '@univerjs-pro/docs-callout-ui',
15+
locale: '@univerjs-pro/docs-callout-ui/locale/zh-CN',
16+
style: '@univerjs-pro/docs-callout-ui/lib/index.css',
17+
}],
18+
server: false,
19+
}}
20+
/>
21+
22+
标注块功能允许您在文档中以视觉上醒目的区块高亮显示重要信息，并支持自定义图标和颜色。
23+
24+
## 介绍
25+
26+
在 Univer Docs 中，标注块使您能够：
27+
28+
- **高亮关键信息**：吸引读者对重要说明、警告或提示的注意。
29+
- **自定义外观**：选择不同的图标和配色方案以匹配您的内容。
30+
- **组织内容**：用视觉分隔的区块来结构化您的文档。
31+
32+
## 插件模式
33+
34+
### 安装
35+
36+
```package-install
37+
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
38+
```
39+
40+
### 使用
41+
42+
```typescript
43+
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout' // [!code ++]
44+
import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui' // [!code ++]
45+
import DocsCalloutUIZhCN from '@univerjs-pro/docs-callout-ui/locale/zh-CN' // [!code ++]
46+
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
47+
48+
import '@univerjs-pro/docs-callout-ui/lib/index.css' // [!code ++]
49+
50+
const univer = new Univer({
51+
locale: LocaleType.ZH_CN,
52+
locales: {
53+
[LocaleType.ZH_CN]: mergeLocales(
54+
DocsCalloutUIZhCN, // [!code ++]
55+
),
56+
},
57+
})
58+
59+
univer.registerPlugin(UniverDocsCalloutPlugin) // [!code ++]
60+
univer.registerPlugin(UniverDocsCalloutUIPlugin) // [!code ++]
61+
```
62+
63+
如果您拥有 Univer 商业许可证，请参阅[在客户端使用许可证](/guides/pro/license#in-plugin-mode)进行配置。
64+
65+
## Facade API
66+
67+
使用 API 前请确保已导入 facade：
68+
69+
```typescript
70+
import '@univerjs-pro/docs-callout/facade'
71+
```
72+
73+
### 获取所有标注块
74+
75+
```typescript
76+
const doc = univerAPI.getActiveDocument()
77+
const callouts = doc?.getCallouts() ?? []
78+
```
79+
80+
### 根据 ID 获取标注块
81+
82+
```typescript
83+
const doc = univerAPI.getActiveDocument()
84+
const callout = doc?.getCallout('callout-block-id')
85+
```
86+
87+
### 插入标注块
88+
89+
```typescript
90+
const doc = univerAPI.getActiveDocument()
91+
const callout = doc?.insertCallout({
92+
startOffset: 12,
93+
endOffset: 35,
94+
config: { icon: '💡' },
95+
})
96+
```
97+
98+
### 更新标注块配置
99+
100+
```typescript
101+
const doc = univerAPI.getActiveDocument()
102+
doc?.updateCallout('callout-block-id', { icon: '⚠️' })
103+
```
104+
105+
### 设置标注块图标
106+
107+
```typescript
108+
const doc = univerAPI.getActiveDocument()
109+
doc?.setCalloutIcon('callout-block-id', '📝')
110+
```

0 commit comments

Comments
 (0)