CodeCollapse
Learn how to use the ProseCodeCollapse component in your Nuxt app.
Wrap your code-block with a code-collapse
component to display a collapsible code block.
main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
::code-collapse
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
```
::
API
Props
Prop | Default | Type |
---|---|---|
icon |
|
The icon displayed to toggle the code. |
name |
|
The name displayed in the trigger label. |
openText |
|
The text displayed when the code is collapsed. |
closeText |
|
The text displayed when the code is expanded. |
open |
|
|
ui |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
prose: {
codeCollapse: {
slots: {
root: 'relative [&_pre]:h-[200px]',
footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
trigger: 'group',
triggerIcon: 'group-data-[state=open]:rotate-180'
},
variants: {
open: {
true: {
root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
},
false: {
root: '[&_pre]:overflow-hidden',
footer: 'bg-gradient-to-t from-muted'
}
}
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
codeCollapse: {
slots: {
root: 'relative [&_pre]:h-[200px]',
footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
trigger: 'group',
triggerIcon: 'group-data-[state=open]:rotate-180'
},
variants: {
open: {
true: {
root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
},
false: {
root: '[&_pre]:overflow-hidden',
footer: 'bg-gradient-to-t from-muted'
}
}
}
}
}
}
})
]
})
Changelog
No recent changes