Code Preview Tabs
A code preview tabs component that allows you to preview and switch between different code blocks.
Hello, world!
Installation
1. Follow the links to install required rlx packages
| Package | Type | Link |
|---|---|---|
@rlx-widgets/tabs | Widget | |
@rlx-widgets/select | Widget | |
@rlx-components/shiki-code-block | Component |
2. Install the following dependencies
Loading...
API Reference
Props list
| Prop | Type | Default | Example | Description |
|---|---|---|---|---|
preview | - | - | The preview to be displayed. | |
code | string | undefined | - | console.log("Hello, world!"); | The code to be highlighted. |
variants | - | - | Allows multiple preview and code combinations. | |
lang | BundledLanguage | - | "tsx" | Supported languagesFull list |
classNames | - | Style the preview and code blocks. |
variants prop is mutually exclusive with preview and code props. If variants is provided, preview and code are not required. Conversely, if variants is not present, then preview and code are required.