Skeleton 骨架屏
Skeleton 用于展示加载中的占位内容。组件使用 Rue 当前的原子骨架视觉，同时补充更接近 成熟业务骨架屏的组合 API、元素级用法和更细的语义定制入口。
何时使用
- 接口返回前需要先锁定卡片、列表、详情页等最终布局。
- 首屏信息量较多，比单一 loading 更需要可预期的内容节奏。
- 需要在组合骨架和原子骨架之间切换，用同一套视觉语言拼出不同页面。
整合基础示例
基础方块、圆形内容、文本行都还在
基础 Rue 示例不删除，只是按“原子骨架 / 组合骨架 / 元素 API”重组。
语义 API
组合骨架、独立元素、列表加载一套打通
使用 avatar/title/paragraph/loading/round，并补上语义槽位 classNames/styles。
保持 Rue 风格
仍然用 Rue 当前 daisyUI 底色，只做布局能力和示例 丰富度增强。
原子骨架
这些用法保持当前示例，适合直接拼局部占位或自定义布局骨架。
# Skeleton
# Skeleton circle with content
# Skeleton rectangle with content
# Skeleton text
AI is thinking harder...
组合骨架
主要场景：复杂内容组合、children 切换、列表加载，以及圆角行样式。
# Composition API
# Loading Switch
当前状态：加载中
# List Layout
批量骨架比单一 loading 更接近最终列表密度。
# Rounded Rows
# Semantic slots
- 语义槽位只改 root/header/section/avatar/title/paragraph，不必重写组件结构。
- 适合营销页首屏、品牌卡片、仪表盘重点模块。
元素 API
提供一组 Button / Avatar / Input / Image / Node 示范，但使用 Rue 自己的视觉基底。
# Element Variants
Button / Input block
Node
API
根组件提供常见的组合式参数，同时支持 Rue 基础的原子骨架写法。rootClassName、classNames和styles 可用于只改局部槽位，不影响整棵骨架的默认结构。
Skeleton
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active | 开启 pulse 动画，用在组合骨架和独立元素上。 | boolean | false |
as | 基础骨架根节点标签，仅原子模式下生效。 | any | 'div' |
avatar | 显示头像占位；传对象时可继续设置 size、shape、className、style。 | boolean | SkeletonAvatarProps | false |
title | 显示标题占位；传对象时可设置 width、className、style。 | boolean | SkeletonTitleProps | true |
paragraph | 显示段落占位；传对象时可设置 rows、width、rowClassName。 | boolean | SkeletonParagraphProps | true |
loading | 为 false 时直接渲染 children；适合首屏加载切换。 | boolean | - |
round | 让 title 与 paragraph 的占位条使用圆角胶囊样式。 | boolean | false |
rootClassName | 组合骨架根节点的附加 className。 | string | - |
classNames | 按 root/header/section/avatar/title/paragraph 精细注入类名。 | SkeletonClassNames | - |
styles | 按 root/header/section/avatar/title/paragraph 精细注入内联样式。 | SkeletonStyles | - |
Title / Paragraph
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
SkeletonTitleProps.width | 设置标题宽度，支持数字和字符串。 | number | string | - |
SkeletonParagraphProps.rows | 设置段落行数。 | number | 2 或 3（按布局推断） |
SkeletonParagraphProps.width | 设置最后一行宽度，或传数组分别控制每一行宽度。 | number | string | Array<number | string> | - |
SkeletonParagraphProps.rowClassName | 给每一行骨架条追加类名。 | string | - |
Avatar / Button / Input / Image / Node
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Skeleton.Avatar | 支持 active、shape、size；适合头像、徽章、卡片头部占位。 | shape: circle | square; size: number | xs | sm | md | lg | xl | shape=circle, size=md |
Skeleton.Button | 支持 active、block、shape、size；覆盖按钮宽度和外形演示。 | shape: default | square | round | circle; size: number | xs | sm | md | lg | xl | shape=default, size=md |
Skeleton.Input | 支持 active、block、size；适合表单行和搜索框占位。 | size: number | xs | sm | md | lg | xl; block?: boolean | size=md, block=false |
Skeleton.Image | 支持 active、aspect 与 children；默认提供图片占位图标。 | aspect: square | video | aspect=video |
Skeleton.Node | 自定义节点骨架；可用 as、children、className、style 拼任意占位。 | as?: any; children?: any | as='div' |
Semantic Slots
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
classNames.root / styles.root | 控制整个组合骨架容器。 | string / Record<string, any> | - |
classNames.header / styles.header | 控制头像外层区域。 | string / Record<string, any> | - |
classNames.section / styles.section | 控制标题与段落所在内容区。 | string / Record<string, any> | - |
classNames.avatar / styles.avatar | 控制头像骨架本体。 | string / Record<string, any> | - |
classNames.title / styles.title | 控制标题骨架条。 | string / Record<string, any> | - |
classNames.paragraph / styles.paragraph | 控制段落骨架容器。单行样式仍通过 rowClassName 处理。 | string / Record<string, any> | - |