/*! For license information please see 6138.f6675fec.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["6138"],{7052:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Empty

\n

Intro

\n

Occupation reminder when empty.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Empty } from 'vant';\n\nconst app = createApp();\napp.use(Empty);\n
\n

Usage

\n

Basic Usage

\n
<van-empty description="Description" />\n
\n

Image Type

\n

Use the image prop to display different placeholder images.

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

Custom Size

\n

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

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

You can set the width and height separately.

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

Custom Image

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

Bottom Content

\n
<van-empty description="Description">\n  <van-button round type="primary" class="bottom-button">Button</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n
\n

API

\n

Props

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

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultCustom bottom content
imageCustom image
descriptionCustom description
\n

Types

\n

The component exports the following type definitions:

\n
import type { EmptyProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
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-
\n
'},null,8,e))}}}]);