Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ class HelloWorld {

And you will get the following:

````mdx-code-block
<Tabs
defaultValue="js"
values={[
Expand Down Expand Up @@ -433,6 +434,7 @@ class HelloWorld {

</TabItem>
</Tabs>
````

You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />;
```

```mdx-code-block
import TOCInline from '@theme/TOCInline';

<BrowserWindow>

<TOCInline toc={toc} />

</BrowserWindow>
```

## Custom table of contents

Expand All @@ -54,11 +56,13 @@ import TOCInline from '@theme/TOCInline';
/>;
```

```mdx-code-block
<BrowserWindow>

<TOCInline toc={[toc[2], toc[4]]} />

</BrowserWindow>
```

---

Expand Down
10 changes: 10 additions & 0 deletions website/docs/guides/markdown-features/markdown-features-tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import TabItem from '@theme/TabItem';

And you will get the following:

```mdx-code-block
<Tabs
defaultValue="apple"
values={[
Expand All @@ -41,6 +42,7 @@ And you will get the following:
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

:::info

Expand Down Expand Up @@ -78,6 +80,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -99,6 +102,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac">Use Command + V to paste.</TabItem>
</Tabs>
```

For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.

Expand All @@ -117,6 +121,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -129,6 +134,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
<TabItem value="mac">I am macOS.</TabItem>
<TabItem value="linux">I am Linux.</TabItem>
</Tabs>
```

---

Expand Down Expand Up @@ -160,6 +166,7 @@ Tab choices with different `groupId`s will not interfere with each other:
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -181,6 +188,7 @@ Tab choices with different `groupId`s will not interfere with each other:
<TabItem value="win">Windows is windows.</TabItem>
<TabItem value="unix">Unix is unix.</TabItem>
</Tabs>
```

## Customizing tabs

Expand All @@ -204,6 +212,7 @@ import TabItem from '@theme/TabItem';
</Tabs>;
```

```mdx-code-block
<Tabs
className="unique-tabs"
defaultValue="apple"
Expand All @@ -216,3 +225,4 @@ import TabItem from '@theme/TabItem';
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.

This will render in the browser as follows:

```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';

<BrowserWindow url="http://localhost:3000">
Expand All @@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
- multiple times

</BrowserWindow>
```

## Markdown headers

Expand Down Expand Up @@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';

And you will get the following:

```mdx-code-block
<Tabs
defaultValue="apple"
values={[
Expand All @@ -297,6 +300,7 @@ And you will get the following:
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

:::info

Expand Down Expand Up @@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac">Use Command + V to paste.</TabItem>
</Tabs>
```

For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.

Expand All @@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
<TabItem value="mac">I am macOS.</TabItem>
<TabItem value="linux">I am Linux.</TabItem>
</Tabs>
```

---

Expand Down Expand Up @@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
<TabItem value="win">Windows is windows.</TabItem>
<TabItem value="unix">Unix is unix.</TabItem>
</Tabs>
```

### Customizing tabs

Expand Down Expand Up @@ -936,6 +946,7 @@ class HelloWorld {

And you will get the following:

````mdx-code-block
<Tabs
defaultValue="js"
values={[
Expand Down Expand Up @@ -973,6 +984,7 @@ class HelloWorld {

</TabItem>
</Tabs>
````

You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.

Expand Down Expand Up @@ -1050,11 +1062,13 @@ or
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
```

```mdx-code-block
<a
target="_blank"
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
Download this PDF
</a>
```

[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ The headers are well-spaced so that the hierarchy is clear.

This will render in the browser as follows:

```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';

<BrowserWindow url="http://localhost:3000">
Expand All @@ -90,6 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
- multiple times

</BrowserWindow>
```

## Markdown headers

Expand Down Expand Up @@ -286,6 +288,7 @@ import TabItem from '@theme/TabItem';

And you will get the following:

```mdx-code-block
<Tabs
defaultValue="apple"
values={[
Expand All @@ -297,6 +300,7 @@ And you will get the following:
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

:::info

Expand Down Expand Up @@ -334,6 +338,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -355,6 +360,7 @@ You may want choices of the same kind of tabs to sync with each other. For examp
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac">Use Command + V to paste.</TabItem>
</Tabs>
```

For all tab groups that have the same `groupId`, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same `groupId`, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.

Expand All @@ -373,6 +379,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -385,6 +392,7 @@ For all tab groups that have the same `groupId`, the possible values do not need
<TabItem value="mac">I am macOS.</TabItem>
<TabItem value="linux">I am Linux.</TabItem>
</Tabs>
```

---

Expand Down Expand Up @@ -416,6 +424,7 @@ Tab choices with different `groupId`s will not interfere with each other:
</Tabs>
```

```mdx-code-block
<Tabs
groupId="operating-systems"
defaultValue="win"
Expand All @@ -437,6 +446,7 @@ Tab choices with different `groupId`s will not interfere with each other:
<TabItem value="win">Windows is windows.</TabItem>
<TabItem value="unix">Unix is unix.</TabItem>
</Tabs>
```

### Customizing tabs

Expand All @@ -460,6 +470,7 @@ import TabItem from '@theme/TabItem';
</Tabs>;
```

```mdx-code-block
<Tabs
className="unique-tabs"
defaultValue="apple"
Expand All @@ -472,6 +483,7 @@ import TabItem from '@theme/TabItem';
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

## Inline table of contents

Expand All @@ -489,13 +501,15 @@ import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />;
```

```mdx-code-block
import TOCInline from '@theme/TOCInline';

<BrowserWindow>

<TOCInline toc={toc} />

</BrowserWindow>
```

### Custom table of contents

Expand All @@ -522,11 +536,13 @@ import TOCInline from '@theme/TOCInline';
/>;
```

```mdx-code-block
<BrowserWindow>

<TOCInline toc={[toc[3], toc[4]]} />

</BrowserWindow>
```

## Callouts/admonitions

Expand Down Expand Up @@ -991,6 +1007,7 @@ class HelloWorld {

And you will get the following:

````mdx-code-block
<Tabs
defaultValue="js"
values={[
Expand Down Expand Up @@ -1028,6 +1045,7 @@ class HelloWorld {

</TabItem>
</Tabs>
````

You may want to implement your own `<MultiLanguageCode />` abstraction if you find the above approach too verbose. We might just implement one in future for convenience.

Expand Down Expand Up @@ -1105,11 +1123,13 @@ or
[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)
```

```mdx-code-block
<a
target="_blank"
href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>
Download this PDF
</a>
```

[Download this PDF using Markdown](./assets/docusaurus-asset-example-pdf.pdf)

Expand Down