模块
UI 工具包
UI 工具包供模块作者构建自定义视图。
我们建议您首先阅读 模块作者指南。
DevTools UI 工具包供模块作者使用与内置 DevTools UI 类似的外观和感觉构建自定义视图。源代码可以在 packages/devtools-ui-kit 中找到。
安装
我们建议您使用 入门模板 为您的模块编写 DevTools 集成，该模板内置并可以使用。
手动安装
npm i @nuxt/devtools-ui-kit
export default defineNuxtConfig({
modules: [
'@nuxt/devtools-ui-kit'
]
})
用法
在幕后，@nuxt/devtools-ui-kit 是一个由 UnoCSS 和 VueUse 支持的非捆绑组件库。组件自动导入。
在这个库中，我们为每个组件引入了 n 属性以自定义样式和变体。例如，要制作一个红色按钮
<NButton n="red" />
要使其更大，请将大小说明符（sm、md、lg 或 xl）添加到 n 属性中
<NButton n="red xl" />
您可以将相同的说明符应用于任何其他组件，例如
<NCheckbox n="red xl" />
将它应用于父组件可以创建一个本地主题范围
<NCard n="green-500">
<!-- both of them are themed green -->
<NCheckbox>i accept the terms & conditions</NCheckbox>
<NButton>Submit</NButton>
</NCard>
请查看我们的 在线演示 以了解更多组件用法。
组件
查看 所有组件。
主题
由 UnoCSS 支持，您可以使用 Tailwind/Windi CSS 实用程序快速自定义组件的外观和感觉。
也可以全局覆盖默认主题，例如
// nuxt.config.js
export default defineNuxtConfig({
modules: [
'@nuxt/devtools-ui-kit'
],
unocss: {
shortcuts: {
'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
'n-button-hover': 'op100 !border-context text-context',
'n-button-active': 'n-active-base bg-context/5',
}
}
})
您可以在 src/unocss.ts 中找到所有默认值和可用条目。