主题
由于 Nuxt UI Pro 建立在 Nuxt UI 之上，因此您应该先查看 Nuxt UI 主题 页面。在这里，您将了解如何选择 primary 和 gray 颜色或要使用的图标集合，例如。
组件
与 Nuxt UI 一样，每个组件都以 U 为前缀，以避免与其他组件冲突。例如，页眉 组件名为 UHeader。
您可以像 @nuxt/ui 一样自定义组件，通过 应用程序配置 或 ui 属性，两者都通过 tailwind-merge 智能地合并。同样，当在任何组件上使用 class 属性时，它也会自动与 wrapper 合并。
例如，如果您使用 着陆页网格 组件，该组件具有以下配置
const config = {
wrapper: 'flex flex-col lg:grid gap-8 lg:grid-cols-12 relative'
}
如果您使用以下 class：<ULandingGrid class="lg:grid-cols-10" />，它将与 wrapper 类合并，网格将有 10 列而不是 12 列。
您可以使用 app.config.ts 中的 ui 对象来实现相同的效果
export default defineAppConfig({
ui: {
landing: {
grid: {
wrapper: 'lg:grid-cols-10'
}
}
}
})
变量
ui 对象中提供了一个新的 variables 键来覆盖 Nuxt UI Pro 中使用的一些变量。默认情况下，使用以下变量
export default defineAppConfig({
ui: {
variables: {
light: {
background: '255 255 255',
foreground: 'var(--color-gray-700)'
},
dark: {
background: 'var(--color-gray-900)',
foreground: 'var(--color-gray-200)'
},
header: {
height: '4rem'
}
}
}
})
background 和 foreground 变量被转换为颜色，并在某些组件中使用。它们也会自动应用于 body 元素，因此您无需手动操作
body {
@apply antialiased font-sans text-foreground bg-background;
}
header.height 变量用于设置 页眉 组件的高度。其他一些组件，如 侧边栏、主体、内容目录 等，也使用它来相应地定位自己。
图标
ui 对象中提供了一个新的 icons 键来覆盖 Nuxt UI Pro 中使用的一些图标。默认情况下，使用以下图标
export default defineAppConfig({
ui: {
icons: {
dark: 'i-heroicons-moon-20-solid',
light: 'i-heroicons-sun-20-solid',
system: 'i-heroicons-computer-desktop-20-solid',
search: 'i-heroicons-magnifying-glass-20-solid',
external: 'i-heroicons-arrow-up-right-20-solid',
chevron: 'i-heroicons-chevron-down-20-solid',
hash: 'i-heroicons-hashtag-20-solid',
menu: 'i-heroicons-bars-3-20-solid',
close: 'i-heroicons-x-mark-20-solid',
check: 'i-heroicons-check-circle-20-solid'
}
}
})
这些只是快捷方式，您仍然可以专门覆盖它们
export default defineAppConfig({
ui: {
header: {
links: {
trailingIcon: {
name: 'i-ph-caret-down' // Defaults to `ui.icons.chevron`
}
},
button: {
icon: {
open: 'i-ph-list',
close: 'i-ph-x'
}
}
}
}
})
请注意，这些快捷方式用于跨组件重复的图标，例如 ColorModeButton、ColorModeToggle 和 ContentSearch 组件中使用的 dark 和 light 图标。其他图标，如上面显示的 ui.header.button，需要专门覆盖。