graphql-engine/docs/wiki/rst-vs-mdx-guide/tabs.mdx
Rikin Kachhia cc30f08f6e docs: move docs-new to docs
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4261
GitOrigin-RevId: 3d80068acdd61b5350fc36ec3444db47508f9c09
2022-04-13 12:01:50 +00:00

85 lines
1.9 KiB
Plaintext

---
sidebar_position: 7
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Tabs
Should be a straightforward syntax replacement:
<Tabs>
<TabItem value="sphinx" label="Sphinx - RST" default>
```rest
.. rst-class:: api_tabs
// highlight-next-line
.. tabs::
// highlight-next-line
.. tab:: Console
Click the ``Reload`` button in the ``Remote schema`` section on the Hasura console.
// highlight-next-line
.. tab:: API
Make a request to the :ref:`reload_remote_schema<reload_remote_schema>` API.
```
</TabItem>
<TabItem value="docusaurus" label="Docusaurus - MDX">
```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>
```
</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).
:::