98 lines
3.1 KiB
Markdown
98 lines
3.1 KiB
Markdown
- Home
|
|
- Components
|
|
- Preview
|
|
|
|
# Preview
|
|
|
|
The Preview component is used throughout the documentation to display components alongside their code examples. It supports flexible layouts for showcasing components in different arrangements.
|
|
|
|
## FormLayout Options
|
|
|
|
## Default Layout
|
|
|
|
By default, the Preview component displays components horizontally with code below:
|
|
|
|
```
|
|
<Button>Default Layout</Button>
|
|
```
|
|
|
|
### Left Layout
|
|
|
|
Use left prop to position the component on the left side with a fixed width:
|
|
|
|
```
|
|
<Button>Left Layout</Button>
|
|
```
|
|
|
|
### Right Layout
|
|
|
|
Use right prop to position the component on the right side with a fixed width:
|
|
|
|
```
|
|
<Button>Right Layout</Button>
|
|
```
|
|
|
|
### Custom Width
|
|
|
|
You can specify custom widths for left or right layouts:
|
|
|
|
```
|
|
<Button>Custom Width (300px)</Button>
|
|
```
|
|
|
|
```
|
|
<Button>Custom Width (150px)</Button>
|
|
```
|
|
|
|
## Props
|
|
|
|
### Required Props
|
|
|
|
|
|
Prop Type Description
|
|
children ReactNode Required. The code example content to display. Typically contains a markdown code block with syntax highlighting.
|
|
component ReactNode Required. The actual component or JSX element to render in the preview panel.
|
|
|
|
### Layout Props
|
|
|
|
|
|
Prop Type Default Description
|
|
left boolean | number undefined Positions the component on the left side with code on the right. If true, uses default width of 200px. If a number, uses that value as width in pixels.
|
|
right boolean | number undefined Positions the component on the right side with code on the left. If true, uses default width of 200px. If a number, uses that value as width in pixels.
|
|
|
|
### Code Block Props
|
|
|
|
|
|
Prop Type Default Description
|
|
lines number undefined Fixed height in lines. If collapsed=true, shows this many lines when collapsed. If collapsed=false, uses this as max height with scroll.
|
|
collapsed boolean false Enable collapse/expand button functionality.
|
|
startCollapsed boolean false Start in collapsed state (requires collapsed=true).
|
|
maxLines number undefined When expanded, max lines before adding scroll. Only works with collapsed=true.
|
|
|
|
### Default Values
|
|
|
|
The Preview component uses these constants for default widths:
|
|
|
|
- Default left width: 200px (when left={true})
|
|
- Default right width: 200px (when right={true})
|
|
|
|
### Layout Behavior
|
|
|
|
- Default layout (no left or right prop): Component displays above the code block in a horizontal stack
|
|
- Left layout (left prop): Component panel on left (fixed width), code panel on right (flexible width)
|
|
- Right layout (right prop): Code panel on left (flexible width), component panel on right (fixed width)
|
|
- Mutual exclusivity: Only use either left OR right, never both simultaneously
|
|
|
|
## Usage Notes
|
|
|
|
- Only use either left OR right prop, not both
|
|
- When no layout prop is provided, uses the default horizontal layout
|
|
- The Preview component handles responsive behavior and code block styling automatically
|
|
- Default widths are 200px for both left and right layouts
|
|
- Code blocks automatically include copy buttons
|
|
- Use collapsed={true} to enable collapse/expand functionality
|
|
- Use lines={n} for fixed height or collapsed display height
|
|
- Use maxLines={n} with collapsed={true} to control expanded height
|
|
- Use startCollapsed={true} to begin in collapsed state
|
|
|