CodeCollapsibleWrapper
Collapsible wrapper for long code blocks
CodeCollapsibleWrapper
A component that wraps long code blocks with expand/collapse functionality, preventing very long code from overwhelming the page.
Usage
Wrap a code block with ::code-collapsible-wrapper:
::code-collapsible-wrapper
\`\`\`ts
// This is a long code example that will be collapsible
export function createConfiguration(options: ConfigOptions): Config {
const defaults = {
theme: 'light',
language: 'en',
features: {
darkMode: true,
animations: true,
accessibility: true,
},
}
return {
...defaults,
...options,
features: {
...defaults.features,
...options.features,
},
}
}
export function validateConfiguration(config: Config): boolean {
if (!config.theme) {
throw new Error('Theme is required')
}
if (!config.language) {
throw new Error('Language is required')
}
return true
}
export function applyConfiguration(config: Config): void {
validateConfiguration(config)
// Apply theme
document.documentElement.setAttribute('data-theme', config.theme)
// Apply language
document.documentElement.setAttribute('lang', config.language)
}
\`\`\`
::
Behavior
When collapsed:
- Shows only the first portion of the code (approximately 16rem height)
- Displays a gradient fade at the bottom
- Shows an "Expand" button
When expanded:
- Shows the full code block
- Shows a "Collapse" button
Props
Slots
Styling
The component includes:
- Smooth expand/collapse animation
- Gradient fade effect when collapsed
- Button positioned in the overlay
- Separator between trigger and content