Code Collapse
CodeCollapse is a component that allows you to collapse code blocks in your documentation. It is useful when you want to show a code snippet but don't want to overwhelm the reader with too much code.
To use it, you need to wrap your fenced code block with CodeCollapse
component.
export default {
data() {
return {
message: 'Hello World!'
}
}
}
Props
Props | Type | Default | Description |
---|---|---|---|
height | String | 220px | Height of the collapsed code block. |
open | Boolean | false | Whether the CodeCollapse is open or not. |
Slots
Slot | Description |
---|---|
default | A slot where fenced code block will be rendered. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
codeCollapse: {
margin: '{prose.code.block.margin}',
borderRadius: '{elements.radii.base}',
borderWidth: '{prose.code.block.borderWidth}',
borderStyle: '{prose.code.block.borderStyle}',
borderColor: '{prose.code.block.borderColor}',
button: {
bottom: '{space.2}',
left: '50%',
transform: 'translateX(-50%)',
paddingY: '{space.1}',
paddingX: '{space.3}',
borderRadius: '{elements.radii.base}',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '{elements.border.secondary.static}',
backgroundColor: {
initial: '{color.gray.50}',
dark: '{color.black}'
},
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
color: '{elements.text.secondary.color.static}',
},
gradientBackdrop: {
height: '50px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, {prose.code.block.backgroundColor} 100%)',
}
},
}
})