34 lines
1.3 KiB
React
34 lines
1.3 KiB
React
import { View } from '@tarojs/components';
|
|
import './index.scss';
|
|
|
|
/**
|
|
* 骨架屏组件（纯本地占位，不依赖网络）。
|
|
* 用法：<Skeleton.Rows n={3} />、<Skeleton.Box h={140} />、<Skeleton.Line w="60%" />、<Skeleton.Circle s={44} />
|
|
* 样式见 index.scss 的 .sk 系列（暗色 + 流光）。
|
|
*/
|
|
const Skeleton = ({ className = '', style = {}, children }) => (
|
|
<View className={className} style={style} aria-hidden="true">{children}</View>
|
|
);
|
|
|
|
Skeleton.Line = ({ w = '100%', h = 12, className = '', style = {} }) => (
|
|
<View className={`sk sk-line ${className}`} style={{ height: h, width: w, ...style }} />
|
|
);
|
|
|
|
Skeleton.Box = ({ h = 120, className = '', style = {}, children }) => (
|
|
<View className={`sk ${className}`} style={{ height: h, ...style }}>{children}</View>
|
|
);
|
|
|
|
Skeleton.Circle = ({ s = 44, className = '', style = {} }) => (
|
|
<View className={`sk sk-round ${className}`} style={{ width: s, height: s, ...style }} />
|
|
);
|
|
|
|
Skeleton.Rows = ({ n = 3, gap = 12, last = '70%', className = '', style = {} }) => (
|
|
<View className={className} style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>
|
|
{Array.from({ length: n }).map((_, i) => (
|
|
<Skeleton.Line key={i} w={i === n - 1 ? last : '100%'} />
|
|
))}
|
|
</View>
|
|
);
|
|
|
|
export default Skeleton;
|