3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-09 15:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(theme-classic): standalone Admonition component (#5848)

Browse source
This commit is contained in:
Joshua Chen 2021-12-21 00:51:19 +08:00 • committed by GitHub
parent 770418f8d2
commit cb4265253a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 158 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
website/docs/guides/markdown-features/markdown-features-admonitions.mdx
View file

@ -143,3 +143,43 @@ import TabItem from '@theme/TabItem';
```
:::
## Usage in JSX
Outside of Markdown, you can use the `@theme/Admonitions` component to get the same output.
```jsx title="MyReactPage.jsx"
import Admonition from '@theme/Admonitions';
export default function MyReactPage() {
return (
<div>
<Admonition type="info">
<p>Some information</p>
</Admonition>
</div>
);
}
```
The types that are accepted are the same as above: `note`, `tip`, `danger`, `info`, `caution`. Optionally, you can specify an icon by passing a JSX element or a string, or a title:
```jsx title="MyReactPage.jsx"
<Admonition type="tip" icon="💡" title="Did you know...">
<p>
Use plugins to introduce shorter syntax for the most commonly used JSX
elements in your project.
</p>
</Admonition>
```
```mdx-code-block
import Admonition from '@theme/Admonition';
import BrowserWindow from '@site/src/components/BrowserWindow';
<BrowserWindow>
<Admonition type="tip" icon="💡" title="Did you know...">
<p>Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.</p>
</Admonition>
</BrowserWindow>
```