ProseCodeCollapse (프로세코드 축소)

긴 코드 블록을 축소 가능하게 만들어 공간을 절약하고 가독성을 향상시킵니다.

Usage

축소 가능한 코드 블록을 표시하려면 code-collapse 구성 요소로 코드 블록을 래핑합니다.

app/assets/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;
}

::code-collapse

```css [app/assets/css/main.css]
@import "windtailcss";
@import "@nuxt/ui";

@theme 정적 {
  --font-sans: 'Public Sans', 'Sans-serif' 등의 글을 게재했다.

  -breakpoint-3xl:1920px; // breakpoint-3xl: 1920px;

  색상 - 녹색 - 50: #EFFDF5;
  색상 - 녹색 - 100 : #D9FBE8;
  색상 - 녹색 - 200 : #B3F5D1;
  -- 색상 - 녹색 - 300 : #75EDAE;
  색상 - 녹색 - 400 : #00DC82;
  색상 - 녹색 - 500 : #00C16A;
  색상 - 녹색 - 600 : #00A155;
  색상 - 녹색 - 700 : #007F45;
  색상 - 녹색 - 800 : #016538;
  색상 - 녹색 - 900: #0A5331;
  색상 - 녹색 - 950 : #052E16;
}
```

::

API

Props (### Props)

Prop	Default	Type
`icon`	`appConfig.ui.icons.chevronDown`	`any` The icon displayed to toggle the code.
`name`	`t('prose.codeCollapse.name')`	`string` The name displayed in the trigger label.
`openText`	`t('prose.codeCollapse.openText')`	`string` The text displayed when the code is collapsed.
`closeText`	`t('prose.codeCollapse.closeText')`	`string` The text displayed when the code is expanded.
`open`	`false`	`boolean`
`ui`		`{ root?: SlotClass; footer?: SlotClass; trigger?: SlotClass; triggerIcon?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme 주제

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      codeCollapse: {
        slots: {
          root: 'relative my-5 bg-muted [&>div]:my-0 [&_pre]:max-h-[80vh] [&_pre]:pb-12',
          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: 'rounded-md'
            },
            false: {
              root: 'max-h-[200px] overflow-hidden rounded-b-md [&_pre]:overflow-hidden',
              footer: 'inset-x-0 bottom-0 border border-t-0 border-muted bg-linear-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 my-5 bg-muted [&>div]:my-0 [&_pre]:max-h-[80vh] [&_pre]:pb-12',
              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: 'rounded-md'
                },
                false: {
                  root: 'max-h-[200px] overflow-hidden rounded-b-md [&_pre]:overflow-hidden',
                  footer: 'inset-x-0 bottom-0 border border-t-0 border-muted bg-linear-to-t from-muted'
                }
              }
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

CardGroup

Organize multiple cards in responsive grid layouts for better content presentation.

CodeGroup

Group multiple code examples in tabbed interfaces for easy comparison.