骨架屏 - Semi Design Next

概述

Avatar：占位头像，默认为圆形，默认尺寸：Avatar medium: width: 48px，height: 48px。支持 size、shape 属性，取值见 API 参考。
Image：占位图像，默认尺寸：width: 100%，height: 100%。
Title：占位标题，默认尺寸：width: 100%， height: 24px。
Paragraph：占位内容部分，默认尺寸：width: 100%，height: 16px，margin-bottom: 10px。
Button：占位按钮，默认尺寸：width: 115px，height: 32px。

注意：默认样式均可通过 class 或 style 进行自定义。

代码演示

如何引入

import { Skeleton } from '@fibrous/semi-ui-solid';

基本使用

显示加载内容

代码

import { createSignal } from 'solid-js';
import { Avatar, Button, Skeleton, Switch } from '@fibrous/semi-ui-solid';

export default function SkeletonDemo() {
    const [loading, setLoading] = createSignal(true);

    return (
        <>
            <span style={{ display: 'flex', 'align-items': 'center' }}>
                <Switch aria-labelledby="skeleton-basic-toggle" onChange={() => setLoading((value) => !value)} />
                <span id="skeleton-basic-toggle" style={{ 'margin-left': '10px' }}>
                    显示加载内容
                </span>
            </span>
            <br />
            <Skeleton placeholder={<Skeleton.Avatar />} loading={loading()}>
                <Avatar color="blue" style={{ 'margin-bottom': '10px' }}>
                    U
                </Avatar>
            </Skeleton>
            <br />
            <Skeleton style={{ width: '200px', height: '150px' }} placeholder={<Skeleton.Image />} loading={loading()}>
                <img src="/assets/placeholder/avatar-a.svg" height="150" alt="avatar" />
            </Skeleton>
            <br />
            <Skeleton style={{ width: '80px' }} placeholder={<Skeleton.Title style={{ 'margin-bottom': '10px' }} />} loading={loading()}>
                <h4 style={{ 'margin-bottom': '0' }}>Semi UI</h4>
            </Skeleton>
            <Skeleton style={{ width: '240px' }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading()}>
                <p style={{ width: '240px' }}>精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
            </Skeleton>
            <br />
            <Skeleton placeholder={<Skeleton.Button />} loading={loading()}>
                <Button>Button</Button>
            </Skeleton>
        </>
    );
}

组合使用

图片和标题。

代码

import { Skeleton } from '@fibrous/semi-ui-solid';

export default function SkeletonDemo() {
    const placeholder = (
        <div>
            <Skeleton.Image style={{ width: '200px', height: '150px' }} />
            <Skeleton.Title style={{ width: '120px', 'margin-top': '10px' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <img src="/assets/placeholder/avatar-a.svg" height="150" alt="avatar" />
            <h4>Semi UI</h4>
        </Skeleton>
    );
}

统计数字。

代码

import { Descriptions, Skeleton } from '@fibrous/semi-ui-solid';

const data = [{ key: '实际用户数量', value: '1,480,000' }];

export default function SkeletonDemo() {
    const placeholder = (
        <div>
            <Skeleton.Paragraph rows={1} style={{ width: '80px', 'margin-bottom': '10px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <Descriptions data={data} row />
        </Skeleton>
    );
}

头像和标题。

代码

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

export default function SkeletonDemo() {
    const placeholder = (
        <div style={{ display: 'flex', 'align-items': 'center' }}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                UI
            </Avatar>
            <span>Semi UI</span>
        </Skeleton>
    );
}

居中段落和按钮。

代码

import type { JSX } from 'solid-js';
import { Button, Skeleton } from '@fibrous/semi-ui-solid';

const style: JSX.CSSProperties = {
    display: 'flex',
    'flex-direction': 'column',
    'align-items': 'center',
    width: '300px',
    'margin-bottom': '10px',
};

export default function SkeletonDemo() {
    const placeholder = (
        <div style={style}>
            <Skeleton.Paragraph style={style} rows={3} />
            <Skeleton.Button />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading style={{ 'text-align': 'center' }}>
            <div style={{ 'text-align': 'center' }}>
                <p>Hi, Bytedance dance dance.</p>
                <p>Hi, Bytedance dance dance.</p>
                <Button>Button</Button>
            </div>
        </Skeleton>
    );
}

头像、标题和段落。

代码

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

const style = {
    display: 'flex',
    'align-items': 'flex-start',
};

export default function SkeletonDemo() {
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', 'margin-bottom': '12px', 'margin-top': '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <div style={style}>
                <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                    UI
                </Avatar>
                <div>
                    <h3>Semi UI</h3>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                </div>
            </div>
        </Skeleton>
    );
}

表格。

代码

import { Skeleton, Table, type ColumnProps } from '@fibrous/semi-ui-solid';

const columns: ColumnProps[] = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

const dataSource = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Disabled User',
        age: 99,
        address: 'Sidney No. 1 Lake Park',
    },
];

const placeholderColumns: ColumnProps[] = [1, 2, 3].map((key) => ({
    key,
    title: () => <Skeleton.Title style={{ width: '0' }} />,
    render: () => <Skeleton.Paragraph style={{ width: `${50 * key}px` }} rows={1} />,
}));

const placeholderDataSource = [1, 2, 3, 4].map((key) => ({ key }));

export default function SkeletonDemo() {
    const placeholder = (
        <div style={{ position: 'relative' }}>
            <Table style={{ 'background-color': 'var(--semi-color-bg-1)' }} columns={placeholderColumns} dataSource={placeholderDataSource} pagination={false} />
            <div style={{ position: 'absolute', left: '0', right: '0', top: '0', bottom: '0' }} />
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading>
            <div>
                <Table columns={columns} dataSource={dataSource} pagination={false} />
            </div>
        </Skeleton>
    );
}

加载动画

通过设置 active 属性可以展示动画效果。

代码

import { Avatar, Skeleton } from '@fibrous/semi-ui-solid';

const style = {
    display: 'flex',
    'align-items': 'flex-start',
};

export default function SkeletonDemo() {
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ 'margin-right': '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', 'margin-bottom': '12px', 'margin-top': '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );

    return (
        <Skeleton placeholder={placeholder} loading active>
            <div style={style}>
                <Avatar color="blue" style={{ 'margin-right': '12px' }}>
                    UI
                </Avatar>
                <div>
                    <h3>Semi UI</h3>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                </div>
            </div>
        </Skeleton>
    );
}

API 参考

Skeleton

Props

属性	说明	类型	默认值
active	是否展示动画效果。	`boolean`	-
loading	为 true 时显示 `placeholder`，反之显示子内容。	`boolean`	`true`
placeholder	加载等待时的占位元素。	`JSX.Element`	-

class、style、ref 与原生属性和事件落在占位根元素上。loading 为 false 时组件只渲染子内容，不再有根元素，这些属性随占位一起丢弃。根元素的 aria-busy="true" 不能被关闭。

Skeleton.Avatar

Props

属性	说明	类型	默认值
prefixCls	类名前缀，默认为 `semi-skeleton`。	`string`	-
shape	占位头像的形状，可选 `circle` 或 `square`，未设置时为 `circle`。	`'circle' \| 'square'`	-
size	占位头像的大小，可选 `extra-extra-small`、`extra-small`、`small`、`medium`、`large` 或 `extra-large`，未设置时为 `medium`。	`Type`	-
type	替换占位块自带的类型，同时决定它的类名；不为 `avatar` 时 `size`、`shape` 不生效。	`string`	-

class、style、ref 与原生属性和事件落在占位块上。

Skeleton.Image

Props

属性	说明	类型	默认值
prefixCls	类名前缀，默认为 `semi-skeleton`。	`string`	-
type	替换占位块自带的类型，同时决定它的类名。	`string`	-

Skeleton.Title

Props

属性	说明	类型	默认值
prefixCls	类名前缀，默认为 `semi-skeleton`。	`string`	-
type	替换占位块自带的类型，同时决定它的类名。	`string`	-

Skeleton.Button

Props

属性	说明	类型	默认值
prefixCls	类名前缀，默认为 `semi-skeleton`。	`string`	-
type	替换占位块自带的类型，同时决定它的类名。	`string`	-

Skeleton.Image、Skeleton.Title、Skeleton.Button 没有 size、shape，class、style、ref 与原生属性和事件落在占位块上。

Skeleton.Paragraph

Props

属性	说明	类型	默认值
prefixCls	类名前缀，默认为 `semi-skeleton`。	`string`	-
rows	占位段落的行数，未设置时为 4。	`number`	-

class、style、ref 与原生属性和事件落在 ul 根元素上。

Accessibility

加载时 Skeleton 的外层带有 aria-busy="true"，占位块与段落占位带有 aria-hidden="true"，读屏只知道内容正在加载；使用方传入的同名属性优先于占位块上的 aria-hidden，aria-busy 不能被关闭。
加载结束后直接渲染子内容，不再有 Skeleton 的外层元素。

文案规范

不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$animation_duration-skeleton-highlight	1400ms	骨架屏高亮动画时长
$animation_function-skeleton-highlight	ease
$color-skeleton_default-bg-default	var(--semi-color-fill-0)	骨架屏背景色 - 默认
$color-skeleton_loading-gradient-bg-active	var(--semi-color-fill-1)	骨架屏背景色 - 动画开启后
$width-skeleton_avatar_extra_extra_small	20px	头像骨架屏尺寸 - 极小
$width-skeleton_avatar_extra_small	24px	头像骨架屏尺寸 - 超小
$width-skeleton_avatar_small	32px	头像骨架屏尺寸 - 小
$width-skeleton_avatar_medium	48px	头像骨架屏尺寸 - 中
$width-skeleton_avatar_large	72px	头像骨架屏尺寸 - 大
$width-skeleton_avatar_extra_large	128px	头像骨架屏尺寸 - 超大
$width-skeleton_button	115px	按钮骨架屏宽度
$height-skeleton_li	16px	段落骨架屏高度
$height-skeleton_title	$height-control-small	标题骨架屏高度
$height-skeleton_button	$height-control-default	按钮骨架屏高度
$spacing-skeleton_li-marginBottom	10px	按钮骨架屏高度
$radius-skeleton_item	var(--semi-border-radius-small)	骨架屏圆角
$radius-skeleton_li	var(--semi-border-radius-small)	骨架屏圆角