graphql-engine/docs/wiki/docusaurus-mdx-guide/tabs.mdx
Rikin Kachhia 4c66d648c7 docs: add prettier
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9923
GitOrigin-RevId: 94038efe5768b63f38dfb447bc315ae5f7185c43
2023-07-21 12:52:40 +00:00

57 lines
1.4 KiB
Plaintext

---
sidebar_position: 7
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Tabs
Should be a straightforward syntax replacement:
```jsx
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs className="api-tabs">
<TabItem value="console" label="Console">
Click the `Reload` button in the `Remote Schema` section on the Hasura
Console.
</TabItem>
<TabItem value="api" label="API">
Make a request to the [reload_remote_schema](#) API.
</TabItem>
</Tabs>;
```
Which should render like below:
<Tabs className="api-tabs">
<TabItem value="console" label="Console">
Click the `Reload` button in the `Remote Schema` section on the Hasura Console.
</TabItem>
<TabItem value="api" label="API">
Make a request to the [reload_remote_schema](#) API.
</TabItem>
</Tabs>
:::caution Adding Markdown as React Component Children
For Docusaurus to parse markdown correctly when added as children of react components (provided by docusaurus).
There should be an empty line before and after the content itself. AT instances parser still fails due to indentation.
So, always start the markdown content at beginning of line and always leave an empty line before and after.
Do not worry about the indentation for Components - the extra lines would make it good enough for readability.
:::
:::info
Please read more about Tabs usage and syntax in docusaurus [Tabs docs](https://docusaurus.io/docs/markdown-features/tabs).
:::