proselitismo

GitHub también
Resalta la información importante con llamativos cuadros e iconos de colores.

xph0000xUso

Utilice el descuento en la ranura predeterminada del componente callout para agregar un contexto llamativo a su contenido.

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

Icon

Utilice el accesorio icon para mostrar un icono junto al contenido.

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

Color (Edición española)

Utilice el prop color para cambiar el color de la llamada.

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

Link (Edición española)

Puede pasar cualquier propiedad del componente <NuxtLink>, como to y target, para hacer que la llamada sea un enlace.

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

Atajos

También puede utilizar los accesos directos note, tip, warning y caution con iconos y colores predefinidos.

Aquí hay alguna información adicional para usted.
Aquí hay una sugerencia útil.
Tenga cuidado con esta acción, ya que puede tener resultados inesperados.
Esta acción no se puede deshacer.
::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 (Edición española)

Props (Edición española)

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 (Edición española)

Slot Type
default
{}

Temas

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.

Changelog (Edición española)

No recent changes

Badge

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

Card

Create highlighted content blocks with optional links and navigation.