Tabs tests

mdx-code-block

import BrowserWindow from '@site/src/components/BrowserWindow';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Tabs sync with different heights

mdx-code-block

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + C to copy.
  </TabItem>
  <TabItem value="mac" label="macOS">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text
  </TabItem>
</Tabs>

mdx-code-block

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + V to paste.
  </TabItem>
  <TabItem value="mac" label="macOS">
    Use Command + V to paste.
  </TabItem>
</Tabs>

When clicking tabs above, they should stay under cursor and we should adjust the scroll position.

Tabs with className and lazy loading

<Tabs lazy> <TabItem value="apple" label="Apple" className="alert alert--primary" default> This is an apple 🍎 </TabItem> <TabItem value="orange" label="Orange" className="alert alert--secondary"> This is an orange 🍊 </TabItem> <TabItem value="banana" label="Banana" className="alert alert--success"> This is a banana 🍌 </TabItem> </Tabs>

Tabs with wrappers

export function Local(props) { return ( <TabItem value="local" {...props}> Local content </TabItem> ); }

export function PaaS(props) { return ( <TabItem value="paas" {...props}> PaaS content </TabItem> ); }

export function InstallationTabs() { return ( <Tabs groupId="installation" values={[ {value: 'local', label: 'Local Installation'}, {value: 'paas', label: 'Platform as a Service'}, ]}> <Local /> <PaaS /> </Tabs> ); }