Skeleton (骨架屏)
内容加载占位:text / rect / circle 形状,loaded 切换为真实内容,脉冲动画尊重 reduced-motion。
基础用法
text 占一整行的行盒(1lh),中间画一条 1em 高的条,和一行真文字占的高度相同,内容到达时下方不会跳动。 它沿用继承到的字号与行高,所以给它和真实内容相同的字号类(如 class-name="text-sm");同一段落的多行之间不要再加间距。
Basic.vue
形状
Shapes.vue
加载完成切换
骨架带 aria-hidden,读屏器看不到它。播报交给加载区域的容器:设 aria-live="polite",加载期间设 aria-busy="true",读屏器会在加载完成后一次性读出新内容,而不是每个骨架各报一次。
Loaded.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| animation | "none" | "pulse" | "pulse" | Pulse animation (auto-disabled under prefers-reduced-motion); `none` to turn off. |
| className | string | "" | |
| height | string | "" | CSS height. Defaults: text one line box (`1lh`) with a `1em` bar centred in it, rect 1.25rem, circle 2.5rem. An explicit height on `text` is the bar's own height, with no line box around it. |
| loaded | boolean | false | When true, render the default slot (real content) instead of the placeholder. |
| rounded | KunUIRounded | — | |
| variant | "text" | "circle" | "rect" | "rect" | Shape preset: `rect` block, `text` line, or `circle` (avatar). A `text` placeholder is one line box of the font it inherits, so give it the text classes of the content it stands in for (`class-name="text-sm"`) and stack the lines of one paragraph without a gap. |
| width | string | "" | CSS width. Defaults: rect/text 100%, circle = height. |
插槽
| 插槽 | 作用域 |
|---|---|
| #default | — |