ProseCallout 구문 콜아웃

Github (GitHub)
눈에 띄는 색상의 상자와 아이콘으로 중요한 정보를 강조합니다.

Usage

callout 구성 요소의 기본 슬롯에서 Markdown을 사용하여 콘텐츠에 눈길을 끄는 컨텍스트를 추가합니다.

This is a `callout` with full **markdown** support.
::callout
This is a `callout` with full **markdown** support.
::

Icon

icon prop을 사용하여 내용 옆에 아이콘을 표시합니다.

This is a `callout` with an icon.
::callout{icon="i-lucide-square-play"}
This is a `callout` with an icon.
::

Color 이미지

color 소품을 사용하여 콜아웃의 색상을 변경합니다.

This is a `callout` with a custom color.
::callout{icon="i-lucide-info" color="info"}
This is a `callout` with a custom color.
::

링크

<NuxtLink> 구성 요소의 모든 속성을 전달하여 콜아웃을 링크로 만들 수 있습니다.

Learn how to install `@nuxt/ui` in your project.
::callout{icon="i-lucide-square-play" to="/docs/getting-started/installation/nuxt" color="neutral"}
Learn how to install `@nuxt/ui` in your project.
::

바로가기

미리 정의된 아이콘과 색상이 포함된 note, tip, warning 및 caution 바로 가기를 사용할 수도 있습니다.

여기 추가 정보가 있습니다.
여기 도움이 되는 제안이 있습니다.
예상치 못한 결과가 발생할 수 있으므로 이 작업을 수행하는 데 주의하십시오.
이 작업은 실행 취소할 수 없습니다.
::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::

API

Props (### Props)

Prop Default Type
to
string | it | et
target
null | "_blank" | "_parent" | "_self" | "_top" | string
icon
any
color
'neutral'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
ui
{ base?: SlotClass; icon?: SlotClass; externalIcon?: SlotClass; }

Slots

Slot Type
default
{}

Theme 테마

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      callout: {
        slots: {
          base: [
            'group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0',
            'transition-colors'
          ],
          icon: [
            'size-4 shrink-0 align-sub me-2 inline-block',
            'transition-colors'
          ],
          externalIcon: [
            'size-4 align-top absolute end-2 top-2 pointer-events-none',
            'transition-colors'
          ]
        },
        variants: {
          color: {
            primary: {
              base: 'border border-primary/25 bg-primary/10 text-primary-600 dark:text-primary-300 [&_a]:text-primary [&_a]:hover:border-primary [&_a]:outline-primary/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-primary-600 dark:[&_code]:text-primary-300 [&_code]:border-primary/25 [&_a]:[&>code]:outline-primary/25 [&_a]:hover:[&>code]:border-primary [&_a]:hover:[&>code]:text-primary [&_a]:focus-visible:[&>code]:border-primary [&_a]:focus-visible:[&>code]:text-primary [&>ul]:marker:text-primary/50',
              icon: 'text-primary',
              externalIcon: 'text-primary-600 dark:text-primary-300'
            },
            secondary: {
              base: 'border border-secondary/25 bg-secondary/10 text-secondary-600 dark:text-secondary-300 [&_a]:text-secondary [&_a]:hover:border-secondary [&_a]:outline-secondary/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-secondary-600 dark:[&_code]:text-secondary-300 [&_code]:border-secondary/25 [&_a]:[&>code]:outline-secondary/25 [&_a]:hover:[&>code]:border-secondary [&_a]:hover:[&>code]:text-secondary [&_a]:focus-visible:[&>code]:border-secondary [&_a]:focus-visible:[&>code]:text-secondary [&>ul]:marker:text-secondary/50',
              icon: 'text-secondary',
              externalIcon: 'text-secondary-600 dark:text-secondary-300'
            },
            success: {
              base: 'border border-success/25 bg-success/10 text-success-600 dark:text-success-300 [&_a]:text-success [&_a]:hover:border-success [&_a]:outline-success/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-success-600 dark:[&_code]:text-success-300 [&_code]:border-success/25 [&_a]:[&>code]:outline-success/25 [&_a]:hover:[&>code]:border-success [&_a]:hover:[&>code]:text-success [&_a]:focus-visible:[&>code]:border-success [&_a]:focus-visible:[&>code]:text-success [&>ul]:marker:text-success/50',
              icon: 'text-success',
              externalIcon: 'text-success-600 dark:text-success-300'
            },
            info: {
              base: 'border border-info/25 bg-info/10 text-info-600 dark:text-info-300 [&_a]:text-info [&_a]:hover:border-info [&_a]:outline-info/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-info-600 dark:[&_code]:text-info-300 [&_code]:border-info/25 [&_a]:[&>code]:outline-info/25 [&_a]:hover:[&>code]:border-info [&_a]:hover:[&>code]:text-info [&_a]:focus-visible:[&>code]:border-info [&_a]:focus-visible:[&>code]:text-info [&>ul]:marker:text-info/50',
              icon: 'text-info',
              externalIcon: 'text-info-600 dark:text-info-300'
            },
            warning: {
              base: 'border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300 [&_a]:text-warning [&_a]:hover:border-warning [&_a]:outline-warning/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-warning-600 dark:[&_code]:text-warning-300 [&_code]:border-warning/25 [&_a]:[&>code]:outline-warning/25 [&_a]:hover:[&>code]:border-warning [&_a]:hover:[&>code]:text-warning [&_a]:focus-visible:[&>code]:border-warning [&_a]:focus-visible:[&>code]:text-warning [&>ul]:marker:text-warning/50',
              icon: 'text-warning',
              externalIcon: 'text-warning-600 dark:text-warning-300'
            },
            error: {
              base: 'border border-error/25 bg-error/10 text-error-600 dark:text-error-300 [&_a]:text-error [&_a]:hover:border-error [&_a]:outline-error/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-error-600 dark:[&_code]:text-error-300 [&_code]:border-error/25 [&_a]:[&>code]:outline-error/25 [&_a]:hover:[&>code]:border-error [&_a]:hover:[&>code]:text-error [&_a]:focus-visible:[&>code]:border-error [&_a]:focus-visible:[&>code]:text-error [&>ul]:marker:text-error/50',
              icon: 'text-error',
              externalIcon: 'text-error-600 dark:text-error-300'
            },
            neutral: {
              base: 'border border-muted bg-muted text-default',
              icon: 'text-highlighted',
              externalIcon: 'text-dimmed'
            }
          },
          to: {
            true: 'border-dashed'
          }
        },
        compoundVariants: [
          {
            color: 'primary',
            to: true,
            class: {
              base: 'hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
              externalIcon: 'group-hover:text-primary'
            }
          },
          {
            color: 'neutral',
            to: true,
            class: {
              base: 'hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted',
              externalIcon: 'group-hover:text-highlighted'
            }
          }
        ],
        defaultVariants: {
          color: 'neutral'
        }
      }
    }
  }
})
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: {
          callout: {
            slots: {
              base: [
                'group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0',
                'transition-colors'
              ],
              icon: [
                'size-4 shrink-0 align-sub me-2 inline-block',
                'transition-colors'
              ],
              externalIcon: [
                'size-4 align-top absolute end-2 top-2 pointer-events-none',
                'transition-colors'
              ]
            },
            variants: {
              color: {
                primary: {
                  base: 'border border-primary/25 bg-primary/10 text-primary-600 dark:text-primary-300 [&_a]:text-primary [&_a]:hover:border-primary [&_a]:outline-primary/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-primary-600 dark:[&_code]:text-primary-300 [&_code]:border-primary/25 [&_a]:[&>code]:outline-primary/25 [&_a]:hover:[&>code]:border-primary [&_a]:hover:[&>code]:text-primary [&_a]:focus-visible:[&>code]:border-primary [&_a]:focus-visible:[&>code]:text-primary [&>ul]:marker:text-primary/50',
                  icon: 'text-primary',
                  externalIcon: 'text-primary-600 dark:text-primary-300'
                },
                secondary: {
                  base: 'border border-secondary/25 bg-secondary/10 text-secondary-600 dark:text-secondary-300 [&_a]:text-secondary [&_a]:hover:border-secondary [&_a]:outline-secondary/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-secondary-600 dark:[&_code]:text-secondary-300 [&_code]:border-secondary/25 [&_a]:[&>code]:outline-secondary/25 [&_a]:hover:[&>code]:border-secondary [&_a]:hover:[&>code]:text-secondary [&_a]:focus-visible:[&>code]:border-secondary [&_a]:focus-visible:[&>code]:text-secondary [&>ul]:marker:text-secondary/50',
                  icon: 'text-secondary',
                  externalIcon: 'text-secondary-600 dark:text-secondary-300'
                },
                success: {
                  base: 'border border-success/25 bg-success/10 text-success-600 dark:text-success-300 [&_a]:text-success [&_a]:hover:border-success [&_a]:outline-success/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-success-600 dark:[&_code]:text-success-300 [&_code]:border-success/25 [&_a]:[&>code]:outline-success/25 [&_a]:hover:[&>code]:border-success [&_a]:hover:[&>code]:text-success [&_a]:focus-visible:[&>code]:border-success [&_a]:focus-visible:[&>code]:text-success [&>ul]:marker:text-success/50',
                  icon: 'text-success',
                  externalIcon: 'text-success-600 dark:text-success-300'
                },
                info: {
                  base: 'border border-info/25 bg-info/10 text-info-600 dark:text-info-300 [&_a]:text-info [&_a]:hover:border-info [&_a]:outline-info/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-info-600 dark:[&_code]:text-info-300 [&_code]:border-info/25 [&_a]:[&>code]:outline-info/25 [&_a]:hover:[&>code]:border-info [&_a]:hover:[&>code]:text-info [&_a]:focus-visible:[&>code]:border-info [&_a]:focus-visible:[&>code]:text-info [&>ul]:marker:text-info/50',
                  icon: 'text-info',
                  externalIcon: 'text-info-600 dark:text-info-300'
                },
                warning: {
                  base: 'border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300 [&_a]:text-warning [&_a]:hover:border-warning [&_a]:outline-warning/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-warning-600 dark:[&_code]:text-warning-300 [&_code]:border-warning/25 [&_a]:[&>code]:outline-warning/25 [&_a]:hover:[&>code]:border-warning [&_a]:hover:[&>code]:text-warning [&_a]:focus-visible:[&>code]:border-warning [&_a]:focus-visible:[&>code]:text-warning [&>ul]:marker:text-warning/50',
                  icon: 'text-warning',
                  externalIcon: 'text-warning-600 dark:text-warning-300'
                },
                error: {
                  base: 'border border-error/25 bg-error/10 text-error-600 dark:text-error-300 [&_a]:text-error [&_a]:hover:border-error [&_a]:outline-error/25 [&_a]:focus-visible:outline-3 [&_a]:focus-visible:has-[>code]:outline-0 [&_code]:text-error-600 dark:[&_code]:text-error-300 [&_code]:border-error/25 [&_a]:[&>code]:outline-error/25 [&_a]:hover:[&>code]:border-error [&_a]:hover:[&>code]:text-error [&_a]:focus-visible:[&>code]:border-error [&_a]:focus-visible:[&>code]:text-error [&>ul]:marker:text-error/50',
                  icon: 'text-error',
                  externalIcon: 'text-error-600 dark:text-error-300'
                },
                neutral: {
                  base: 'border border-muted bg-muted text-default',
                  icon: 'text-highlighted',
                  externalIcon: 'text-dimmed'
                }
              },
              to: {
                true: 'border-dashed'
              }
            },
            compoundVariants: [
              {
                color: 'primary',
                to: true,
                class: {
                  base: 'hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
                  externalIcon: 'group-hover:text-primary'
                }
              },
              {
                color: 'neutral',
                to: true,
                class: {
                  base: 'hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted',
                  externalIcon: 'group-hover:text-highlighted'
                }
              }
            ],
            defaultVariants: {
              color: 'neutral'
            }
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

변경 로그

No recent changes

Badge

Display version numbers, status labels, and tags within your content.

Card

Create highlighted content blocks with optional links and navigation.