ProseCodeCollapse

Torne blocos de código longos recolhíveis para economizar espaço e melhorar a legibilidade.

Uso

Envolva seu bloco de código com um componente code-collapse para exibir um bloco de código recolhível.

app/assets/css/main.css

@import "tailwindcss";
@import "@nitro/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 "tailwindcss";
@import "@nitro/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`	`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`	`{}`

Tema

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

Changelog

No recent changes

CardGroup

Organize vários cards em layouts de grade responsivos para uma melhor apresentação do conteúdo.

CodeGroup

Agrupe vários exemplos de código em interfaces com abas para facilitar a comparação.