66 lines
1.3 KiB
Plaintext
66 lines
1.3 KiB
Plaintext
---
|
|
title: Code Tabs
|
|
description: A tabs component that displays code for different languages.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<Callout type="info">
|
|
The InstallTabs component has been updated and is now called CodeTabs. It can
|
|
now be used to make both install tabs and code tabs!
|
|
</Callout>
|
|
|
|
<ComponentPreview name="code-tabs-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="code-tabs" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<CodeTabs codes={codes} />
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Install Tabs
|
|
|
|
<ComponentPreview name="install-tabs-demo" />
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
codes: {
|
|
description: 'The codes to display in the tabs',
|
|
type: 'Record<string, string>',
|
|
required: true,
|
|
},
|
|
lang: {
|
|
description: 'The language of the code',
|
|
type: 'string',
|
|
required: false,
|
|
default: 'bash',
|
|
},
|
|
themes: {
|
|
description: 'The shiki themes to display in the tabs',
|
|
type: 'Record<string, string>',
|
|
required: false,
|
|
default: "{ light: 'github-light', dark: 'github-dark' }",
|
|
},
|
|
copyButton: {
|
|
description: 'Whether to show the copy button.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
onCopy: {
|
|
description: 'The function to call when copy is successful.',
|
|
type: '(content: string) => void',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|