组件 · 反馈
Skeleton
A gray placeholder in the shape of the content that is loading, for lists, cards and panels whose layout is known.
也叫 Placeholder
import { Skeleton } from "@botiverse/raft-ui";A skeleton holds the place of content that is still loading: square blocks where avatars and tiles will be, bars where text will be. Use it when a list, card or panel loads for the first time and its layout is known. Which loading indicator fits which wait is in Choosing a component.
When to use
| Situation | Use |
|---|---|
| The layout of what is loading is known | Skeleton |
| The wait has no layout to hold, or happens in a small area | Spinner |
| The percentage is known | Progress |
| Loading finished and there is nothing | EmptyState |
| Loading failed | An error at its scope (Feedback) |
Variants
| Variant | Use for |
|---|---|
variant="line" | A line of text |
variant="block" | A thumbnail, card or any other block; size it with className |
variant="circle" | An avatar or tile. Despite its name it is square, like the avatar it stands for |
Accessibility
Skeletonisaria-hidden. Mark the region that is loading witharia-busy="true"until the content arrives, so assistive technology doesn't read an empty region as empty.
Rules
- Give the skeleton the shape of the content it stands for: square for avatars and tiles, bars for text. The size rule and the rule against swapping placeholders are in Feedback.
API
Skeleton
| Prop | 类型 | 默认值 |
|---|---|---|
| "circle" | "line" | "block" | "block" |
Also takes the attributes of its element.
相关组件
改动
- 0.7.0 · Fixed
Skeletonstops pulsing underprefers-reduced-motion.