Skeleton
内容加载时显示的占位符。
用法
直接使用 Skeleton 组件来显示占位符。
<template>
<div class="flex items-center gap-4">
<USkeleton class="h-12 w-12 rounded-full" />
<div class="grid gap-2">
<USkeleton class="h-4 w-[250px]" />
<USkeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
skeleton: {
base: 'animate-pulse rounded-md bg-elevated'
}
}
})
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: {
skeleton: {
base: 'animate-pulse rounded-md bg-elevated'
}
}
})
]
})