ProseCallout

GitHub
Markeer belangrijke informatie met opvallende gekleurde dozen en pictogrammen.

Gebruik

Gebruik markdown in de standaardsleuf van de callout-component om een opvallende context aan uw inhoud toe te voegen.

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

Icoon

Gebruik de icon prop om een pictogram naast de inhoud weer te geven.

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

Kleur

Gebruik de color prop om de kleur van de callout te veranderen.

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

Link

U kunt elke eigenschap van de <NuxtLink> component zoals to en target doorgeven om de callout een link te maken.

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.
::

Snelkoppelingen

U kunt ook de sneltoetsen note, tip, warning en caution gebruiken met vooraf gedefinieerde pictogrammen en kleuren.

Hier is wat aanvullende informatie voor u.
Hier is een nuttige suggestie.
Wees voorzichtig met deze actie, want deze kan onverwachte resultaten opleveren.
Deze actie kan niet ongedaan worden gemaakt.
::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

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
{}

Thema

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.

Wijzigingsgelog

No recent changes

Badge

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

Card

Create highlighted content blocks with optional links and navigation.