Skip to content

Commit d72b080

Browse files
SoonIterCopilot
SoonIter
and
Copilot
authored
docs: add Callout component documentation (#2998)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 86250fc commit d72b080

File tree

6 files changed

+322
-156
lines changed

6 files changed

+322
-156
lines changed

‎website/docs/en/fragments/container-syntax.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Tabs, Tab } from '@theme';
2+
3+
<Tabs>
4+
5+
<Tab label="Rendered Result">
6+
7+
:::note
8+
This is a `note` callout
9+
:::
10+
11+
:::tip
12+
This is a `tip` callout
13+
:::
14+
15+
:::info
16+
This is an `info` callout
17+
:::
18+
19+
:::warning
20+
This is a `warning` callout
21+
:::
22+
23+
:::danger
24+
This is a `danger` callout
25+
:::
26+
27+
:::details
28+
This is a `details` callout
29+
:::
30+
31+
:::tip Custom Title
32+
This is a callout with a custom title
33+
:::
34+
35+
:::tip\{title="Custom Title"}
36+
This is a callout with a custom title
37+
:::
38+
39+
</Tab>
40+
41+
<Tab label="Syntax">
42+
43+
```markdown
44+
:::note
45+
This is a `note` callout
46+
:::
47+
48+
:::tip
49+
This is a `tip` callout
50+
:::
51+
52+
:::info
53+
This is an `info` callout
54+
:::
55+
56+
:::warning
57+
This is a `warning` callout
58+
:::
59+
60+
:::danger
61+
This is a `danger` callout
62+
:::
63+
64+
:::details
65+
This is a `details` callout
66+
:::
67+
68+
:::tip Custom Title
69+
This is a callout with a custom title
70+
:::
71+
72+
:::tip{title="Custom Title"}
73+
This is a callout with a custom title
74+
:::
75+
```
76+
77+
</Tab>
78+
79+
</Tabs>

‎website/docs/en/guide/use-mdx/container.mdx‎

Lines changed: 4 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -10,85 +10,9 @@ Rspress provides two styles of syntax, [`:::` syntax](#three-colon-syntax) and [
1010

1111
You can use the `:::` syntax to create custom containers and support custom titles. For example:
1212

13-
import { Tabs, Tab } from '@theme';
14-
15-
<Tabs>
16-
17-
<Tab label="Rendered Result">
18-
19-
:::note
20-
This is a `block` of type `note`
21-
:::
22-
23-
:::tip
24-
This is a `block` of type `tip`
25-
:::
26-
27-
:::info
28-
This is a `block` of type `info`
29-
:::
30-
31-
:::warning
32-
This is a `block` of type `warning`
33-
:::
13+
import ContainerSyntax from '../../fragments/container-syntax.mdx';
3414

35-
:::danger
36-
This is a `block` of type `danger`
37-
:::
38-
39-
:::details
40-
This is a `block` of type `details`
41-
:::
42-
43-
:::tip Custom Title
44-
This is a `block` of `Custom Title`
45-
:::
46-
47-
:::tip\{title="Custom Title"}
48-
This is a `block` of `Custom Title`
49-
:::
50-
51-
</Tab>
52-
53-
<Tab label="Syntax">
54-
55-
```markdown
56-
:::note
57-
This is a `block` of type `note`
58-
:::
59-
60-
:::tip
61-
This is a `block` of type `tip`
62-
:::
63-
64-
:::info
65-
This is a `block` of type `info`
66-
:::
67-
68-
:::warning
69-
This is a `block` of type `warning`
70-
:::
71-
72-
:::danger
73-
This is a `block` of type `danger`
74-
:::
75-
76-
:::details
77-
This is a `block` of type `details`
78-
:::
79-
80-
:::tip Custom Title
81-
This is a `block` of `Custom Title`
82-
:::
83-
84-
:::tip{title="Custom Title"}
85-
This is a `block` of `Custom Title`
86-
:::
87-
```
88-
89-
</Tab>
90-
91-
</Tabs>
15+
<ContainerSyntax />
9216

9317
:::warning Notes
9418

@@ -108,6 +32,8 @@ This is a `block` of `Custom Title`
10832

10933
You can use [GitHub Markdown Alerts Syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) to create custom containers.
11034

35+
import { Tabs, Tab } from '@theme';
36+
11137
<Tabs>
11238

11339
<Tab label="Rendered Result">

‎website/docs/en/ui/components/callout.mdx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
overviewHeaders: []
3+
tag: eject-only
4+
---
5+
6+
# Callout
7+
8+
The Callout component is used to display highlighted information blocks such as tips, warnings, and notes.
9+
10+
:::tip
11+
We recommend using [container syntax](/guide/use-mdx/container) which works in both Markdown and MDX files.
12+
:::
13+
14+
## Container syntax
15+
16+
In most cases, use the container syntax to create callouts:
17+
18+
import ContainerSyntax from '../../fragments/container-syntax.mdx';
19+
20+
<ContainerSyntax />
21+
22+
For more container syntax details, see [Container](/guide/use-mdx/container).
23+
24+
## Component usage
25+
26+
You can also use the Callout component directly in MDX files:
27+
28+
```mdx title="index.mdx"
29+
import { Callout } from '@rspress/core/theme-original';
30+
31+
<Callout type="tip">This is a tip callout</Callout>
32+
33+
<Callout type="warning" title="Warning">
34+
This is a warning with custom title
35+
</Callout>
36+
```
37+
38+
import { Callout } from '@rspress/core/theme-original';
39+
40+
<Callout type="tip">This is a tip callout</Callout>
41+
42+
<Callout type="warning" title="Warning">
43+
This is a warning with custom title
44+
</Callout>
45+
46+
## Customization
47+
48+
You can eject the Callout component to customize its styles and behavior:
49+
50+
```bash
51+
npx rspress eject Callout
52+
```
53+
54+
This will copy the component to `theme/components/Callout`. After customization, re-export it in your `theme/index.tsx`:
55+
56+
```tsx title="theme/index.tsx"
57+
export { Callout } from './components/Callout';
58+
export * from '@rspress/core/theme-original';
59+
```
60+
61+
## Props
62+
63+
```ts
64+
interface CalloutProps {
65+
/**
66+
* The type of callout, which determines its color and icon.
67+
*/
68+
type: 'tip' | 'note' | 'warning' | 'caution' | 'danger' | 'info' | 'details';
69+
/**
70+
* Custom title for the callout. If not provided, the capitalized type will be used.
71+
*/
72+
title?: string;
73+
/**
74+
* The content to display inside the callout.
75+
*/
76+
children: React.ReactNode;
77+
}
78+
```

‎website/docs/zh/fragments/container-syntax.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Tabs, Tab } from '@theme';
2+
3+
<Tabs>
4+
5+
<Tab label="渲染结果">
6+
7+
:::note
8+
这是一个 `note` 类型的 callout
9+
:::
10+
11+
:::tip
12+
这是一个 `tip` 类型的 callout
13+
:::
14+
15+
:::info
16+
这是一个 `info` 类型的 callout
17+
:::
18+
19+
:::warning
20+
这是一个 `warning` 类型的 callout
21+
:::
22+
23+
:::danger
24+
这是一个 `danger` 类型的 callout
25+
:::
26+
27+
:::details
28+
这是一个 `details` 类型的 callout
29+
:::
30+
31+
:::tip 自定义标题
32+
这是一个带有自定义标题的 callout
33+
:::
34+
35+
:::tip\{title="自定义标题"}
36+
这是一个带有自定义标题的 callout
37+
:::
38+
39+
</Tab>
40+
41+
<Tab label="语法">
42+
43+
```markdown
44+
:::note
45+
这是一个 `note` 类型的 callout
46+
:::
47+
48+
:::tip
49+
这是一个 `tip` 类型的 callout
50+
:::
51+
52+
:::info
53+
这是一个 `info` 类型的 callout
54+
:::
55+
56+
:::warning
57+
这是一个 `warning` 类型的 callout
58+
:::
59+
60+
:::danger
61+
这是一个 `danger` 类型的 callout
62+
:::
63+
64+
:::details
65+
这是一个 `details` 类型的 callout
66+
:::
67+
68+
:::tip 自定义标题
69+
这是一个带有自定义标题的 callout
70+
:::
71+
72+
:::tip{title="自定义标题"}
73+
这是一个带有自定义标题的 callout
74+
:::
75+
```
76+
77+
</Tab>
78+
79+
</Tabs>

0 commit comments

Comments
 (0)