呼出
一个用于在您的内容中添加醒目标注的呼出。
用法
使用默认插槽显示具有完整 **Markdown** 支持的呼出组件。
这是一个带有完整 **Markdown** 支持的
呼出。它可以用于链接到 另一个页面.::callout
This is a `callout` with full **markdown** support. It can be used to link to [another page](/pro/prose/card).
::
图标
您可以添加一个 icon 道具，在呼出左侧显示一个图标
这建议一个有用的提示。
::callout{icon="i-heroicons-light-bulb"}
This suggests a helpful tip.
::
颜色
您可以使用 color 道具更改呼出的颜色
这提醒您注意。
::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
This raises a warning to watch out for.
::
链接
您可以添加一个 to 道具使其成为链接，当链接是外部链接时将显示一个外部图标
::callout{icon="i-heroicons-light-bulb" to="https://nuxtjs.org.cn" target="_blank"}
Check out this documentation.
::
道具
图标
字符串
未定义颜色
字符串
"primary"to
字符串
未定义目标
字符串
未定义ui
任何
{}配置
{
wrapper: 'block pl-4 pr-6 py-3 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm/6 my-5 last:mb-0 font-normal group relative prose-code:bg-white dark:prose-code:bg-gray-900',
to: 'hover:border-[--color-light] dark:hover:border-[--color-dark] hover:text-[--color-light] dark:hover:text-[--color-dark] border-dashed hover:border-solid hover:text-gray-800 dark:hover:text-gray-200',
icon: {
base: 'w-4 h-4 mr-2 inline-flex items-center align-sub text-[--color-light] dark:text-[--color-dark]'
},
externalIcon: {
name: 'i-heroicons-arrow-up-right-20-solid',
base: 'w-4 h-4 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-[--color-light] dark:group-hover:text-[--color-dark]'
}
}