Skeleton 骨架屏 | semi-design-vue

概述

Avatar：占位头像，默认为圆形，默认尺寸：Avatar medium: width: 48px，height: 48px。支持 Avatar 的 size（v1.0后支持)、shape 属性 (v2.20后支持)
Image：占位图像，默认尺寸：width: 100%，height: 100%。
Title：占位标题，默认尺寸：width: 100%， height: 24px。
Paragraph：占位内容部分，默认尺寸：width: 100%，height: 16px，margin-bottom: 10px。
Button：占位按钮，默认尺寸：width: 115px，height: 32px。

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

代码演示

如何引入

jsx

import { Skeleton } from '@kousum/semi-ui-vue';

基本使用

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Switch, Avatar, Button } from '@kousum/semi-ui-vue';
import { defineComponent, ref } from 'vue';
​
const Demo = defineComponent(() => {
  const loading = ref(true);
  const showContent = () => {
    loading.value = (!loading.value);
  };
  return ()=>(
    <>
            <span style={{ display: 'flex', alignItems: 'center' }}>
                <Switch onChange={() => showContent()} />
                <span style={{ marginLeft: '10px' }}>显示加载内容</span>
            </span>
      <br />
      <Skeleton placeholder={<Skeleton.Avatar />} loading={loading.value}>
        <Avatar color="blue" style={{ marginBottom: '10px' }}>
          U
        </Avatar>
      </Skeleton>
      <br />
      <Skeleton style={{ width: '200px', height: '150px' }} placeholder={<Skeleton.Image />} loading={loading.value}>
        <img
          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
          height="150"
          alt="avatar"
        />
      </Skeleton>
      <br />
      <Skeleton
        style={{ width: '80px' }}
        placeholder={<Skeleton.Title style={{ marginBottom: '10px' }} />}
        loading={loading.value}
      >

Show Error

Auto Save

组合使用

图片和标题。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton } from '@kousum/semi-ui-vue';
​
export default () => {
    const placeholder = (
        <div>
            <Skeleton.Image style={{ width: '200px', height: '150px' }} />
            <Skeleton.Title style={{ width: '120px', marginTop: '10px' }} />
        </div>
    );
​
    return (
        <Skeleton placeholder={placeholder} loading={true}>
            <img
                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                height="150"
                alt="avatar"
            />
            <h4>Semi UI</h4>
        </Skeleton>
    );
};

Show Error

Auto Save

统计数字。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Descriptions } from '@kousum/semi-ui-vue';
​
export default () => {
    const placeholder = (
        <div>
            <Skeleton.Paragraph rows={1} style={{ width: '80px', marginBottom: '10px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );
​
    const data = [{ key: '实际用户数量', value: '1,480,000' }];
​
    return (
        <Skeleton placeholder={placeholder} loading={true}>
            <Descriptions data={data} row />
        </Skeleton>
    );
};

Show Error

Auto Save

头像和标题。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Avatar } from '@kousum/semi-ui-vue';
​
export default () => {
    const placeholder = (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <Skeleton.Avatar style={{ marginRight: '12px' }} />
            <Skeleton.Title style={{ width: '120px' }} />
        </div>
    );
​
    return (
        <Skeleton placeholder={placeholder} loading={true}>
            <Avatar color="blue" style={{ marginRight: '12px' }}>
                UI
            </Avatar>
            <span>Semi UI</span>
        </Skeleton>
    );
};

Show Error

Auto Save

居中段落和按钮。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Button } from '@kousum/semi-ui-vue';
​
export default () => {
    const style = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '300px',
        marginBottom: '10px',
    };
​
    const placeholder = (
        <div style={style}>
            <Skeleton.Paragraph style={style} rows={3} />
            <Skeleton.Button />
        </div>
    );
​
    return (
        <Skeleton placeholder={placeholder} loading={true} style={{ textAlign: 'center' }}>
            <div style={{ textAlign: 'center' }}>
                <p>Hi, Bytedance dance dance.</p>
                <p>Hi, Bytedance dance dance.</p>
                <Button>Button</Button>
            </div>
        </Skeleton>
    );
};

Show Error

Auto Save

头像、标题和段落。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Avatar } from '@kousum/semi-ui-vue';
​
export default () => {
    const style = {
        display: 'flex',
        alignItems: 'flex-start',
    };
​
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ marginRight: '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', marginBottom: '12px', marginTop: '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );
​
    return (
        <Skeleton placeholder={placeholder} loading={true}>
            <div style={style}>
                <Avatar color="blue" style={{ marginRight: '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>
    );
};

Show Error

Auto Save

表格。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Table } from '@kousum/semi-ui-vue';
​
export default () => {
    const data = {
        columns: [
            {
                title: 'Name',
                dataIndex: 'name',
            },
            {
                title: 'Age',
                dataIndex: 'age',
            },
            {
                title: 'Address',
                dataIndex: 'address',
            },
        ],
        content: [
            {
                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',
            },
        ],
    };

Show Error

Auto Save

加载动画

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

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Skeleton, Avatar } from '@kousum/semi-ui-vue';
​
export default () => {
    const style = {
        display: 'flex',
        alignItems: 'flex-start',
    };
​
    const placeholder = (
        <div style={style}>
            <Skeleton.Avatar style={{ marginRight: '12px' }} />
            <div>
                <Skeleton.Title style={{ width: '120px', marginBottom: '12px', marginTop: '12px' }} />
                <Skeleton.Paragraph style={{ width: '240px' }} rows={3} />
            </div>
        </div>
    );
​
    return (
        <Skeleton placeholder={placeholder} loading={true} active>
            <div style={style}>
                <Avatar color="blue" style={{ marginRight: '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>
    );
};

Show Error

Auto Save

API 参考

Skeleton

属性	说明	类型	默认值
active	是否展示动画效果	boolean	false
className	类名	string	-
loading	为 true 时，显示占位元素。反之则显示子组件	boolean	true
placeholder	加载等待时的占位元素	ReactNode	-
style	样式	CSSProperties	-

Skeleton.Avatar

Skeleton.Image，Skeleton.Title，Skeleton.Button 大部分API 与 Skeleton.Avatar 相同。其中 shape 仅 Skeleton.Avatar支持

属性	说明	类型	默认值
className	类名	string	-
size	设置头像的大小，支持 `extra-extra-small`, `extra-small`、`small`、`medium`、`large`、`extra-large` v>=1.0	string	`medium`
style	样式	CSSProperties	-
shape	指定头像的形状，支持 `circle`、`square`	string	`circle`

Skeleton.Paragraph

属性	说明	类型	默认值
className	类名	string	-
rows	设置段落占位图的行数	number	4
style	样式	CSSProperties	-

文案规范

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

设计变量

color

width

height

spacing

radius

animation

变量	默认值	用法
$color-skeleton_default-bg-default	var(--semi-color-fill-0)	骨架屏背景色 - 默认
$color-skeleton_loading-gradient-bg-active	var(--semi-color-fill-1)	骨架屏背景色 - 动画开启后

显示第 1 条-第 2 条，共 2 条

变量	默认值	用法
$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	按钮骨架屏宽度

显示第 1 条-第 7 条，共 7 条

变量	默认值	用法
$height-skeleton_li	16px	段落骨架屏高度
$height-skeleton_title	$height-control-small	标题骨架屏高度
$height-skeleton_button	$height-control-default	按钮骨架屏高度

显示第 1 条-第 3 条，共 3 条

变量	默认值	用法
$radius-skeleton_item	var(--semi-border-radius-small)	骨架屏圆角
$radius-skeleton_li	var(--semi-border-radius-small)	骨架屏圆角

变量	默认值	用法
$animation_duration-skeleton-highlight	1400ms	骨架屏高亮动画时长
$animation_function-skeleton-highlight	ease

概述 ​

代码演示 ​

如何引入 ​

基本使用 ​

组合使用 ​

加载动画 ​

API 参考 ​

Skeleton ​

Skeleton.Avatar ​

Skeleton.Paragraph ​

文案规范 ​

设计变量 ​

概述

代码演示

如何引入

基本使用

组合使用

加载动画

API 参考

Skeleton

Skeleton.Avatar

Skeleton.Paragraph

文案规范

设计变量