import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},p=n(`

Empty

Intro

Occupation reminder when empty.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Empty } from 'vant';

const app = createApp();
app.use(Empty);

Usage

Basic Usage

<van-empty description="Description" />

Image Type

Use the image prop to display different placeholder images.

<!-- Error -->
<van-empty image="error" description="Description" />
<!-- Network -->
<van-empty image="network" description="Description" />
<!-- Search -->
<van-empty image="search" description="Description" />

Custom Size

Using image-size prop to custom the size of image.

<!-- The default unit is px -->
<van-empty image-size="100" description="Description" />
<!-- Support other units, such as rem, vh, vw -->
<van-empty image-size="10rem" description="Description" />

You can set the width and height separately.

<van-empty :image-size="[60, 40]" description="Description" />

Custom Image

<van-empty
  image="https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
  image-size="80"
  description="Description"
/>

Bottom Content

<van-empty description="Description">
  <van-button round type="danger" class="bottom-button">Button</van-button>
</van-empty>

<style>
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>

API

Props

AttributeDescriptionTypeDefault
imageImage type, can be set to error network search or image URLstringdefault
image-sizeImage sizenumber | string | Array-
descriptionDescriptionstring-

Slots

NameDescription
defaultCustom bottom content
imageCustom image
descriptionCustom description

Types

The component exports the following type definitions:

import type { EmptyProps } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

NameDefault ValueDescription
--van-empty-paddingvar(--van-padding-xl) 0-
--van-empty-image-size160px-
--van-empty-description-margin-topvar(--van-padding-md)-
--van-empty-description-padding0 60px-
--van-empty-description-colorvar(--van-text-color-2)-
--van-empty-description-font-sizevar(--van-font-size-md)-
--van-empty-description-line-heightvar(--van-line-height-md)-
--van-empty-bottom-margin-top24px-
`,15),l=[p],h={__name:"README",setup(d,{expose:s}){return s({frontmatter:{}}),(o,r)=>(a(),t("div",e,l))}};export{h as default};