介绍

空状态时的占位提示。

引入

import Empty from 'sard-uniapp/components/empty/empty.vue'

代码演示

基础使用

<template>
  <sar-empty />
</template>

自定义描述信息

<template>
  <sar-empty description="自定义描述内容" />
</template>

自定义图标大小

通过配置 iconSize 属性可以修改图标大小。

<template>
  <sar-empty icon-size="80rpx" />
</template>

自定义图标

通过配置 icon 属性可以修改图标。

<template>
  <sar-empty icon="empty" icon-family="demo-icons" icon-size="96rpx" />
</template>

额外内容

额外内容会显示在底部。

<template>
  <sar-empty>
    <sar-button>重新请求</sar-button>
  </sar-empty>
</template>

API

EmptyProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
description	描述信息	string	'暂无数据'
icon	自定义图标	string	-
icon-family	图标字体	string	-
icon-size	图标大小	string	-
size 1.27+	组件大小	'small' | 'medium'	'medium'

EmptySlots

插槽	描述	属性
default	自定义额外内容	-
icon	自定义图标内容	-
description	自定义描述内容	-

主题定制

CSS 变量

page,
.sar-portal {
  --sar-empty-icon-font-size: 96rpx;
  --sar-empty-icon-color: var(--sar-gray-300);
  --sar-empty-icon-line-height: var(--sar-leading-none);

  --sar-empty-description-margin-top: 32rpx;
  --sar-empty-description-font-size: var(--sar-text-base);
  --sar-empty-description-color: var(--sar-fourth-color);
  --sar-empty-extra-margin-top: 40rpx;

  --sar-empty-small-icon-font-size: 80rpx;
  --sar-empty-small-description-margin-top: 24rpx;
  --sar-empty-small-description-font-size: var(--sar-text-sm);
}