CodeCollapse

GitHub
使长代码块可折叠，以节省空间并提高可读性。

用法

将您的代码块包装在 code-collapse 组件中，以显示可折叠的代码块。

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

属性

属性默认值类型
图标

appConfig.ui.icons.chevronDown

字符串 | 对象

用于切换代码的图标。

name

t('prose.codeCollapse.name')

string

在触发器标签中显示的名称。

openText

t('prose.codeCollapse.openText')

string

代码折叠时显示的文本。

closeText

t('prose.codeCollapse.closeText')

string

代码展开时显示的文本。

open

false

boolean

ui

{ root?: ClassNameValue; footer?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; }

插槽

插槽类型
default

{}

主题

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'
                }
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

CardGroup

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

CodeGroup

Group multiple code examples in tabbed interfaces for easy comparison.