Empty - Vant 4
Empty
🎭 Transform empty states into delightful user experiences with customizable placeholders and engaging visuals!
📝 Intro
The Empty component provides elegant placeholder content when there's no data to display. Perfect for search results, shopping carts, or any scenario where you need to gracefully handle empty states with style! 🌟
📦 Install
Register the Empty component globally via app.use to start creating beautiful empty states throughout your application! 🚀
import { createApp } from'vue'; import { Empty } from'vant'; const app = createApp(); app.use(Empty);🎨 Usage
🌟 Basic Usage
Create a simple empty state with the default placeholder image - perfect for when you need a clean, minimalist approach! ✨
🖼️ Image Type
Choose from different built-in placeholder images to match your content context! Use error for failed operations, network for connectivity issues, or search for no results found. 🎯
📏 Custom Size
Customize the image size to fit your design perfectly! Use the image-size prop to control dimensions and create the ideal visual balance. 🎨
You can also set width and height separately for precise control over your empty state appearance! 📐
🎨 Custom Image
Replace the default placeholder with your own custom image to match your brand identity and create a unique user experience! 🌈
📝 Bottom Content
Add custom content below the empty state image to provide helpful actions, tips, or additional context for your users! 💡
🔧 API
📋 Props
Configure your empty state component with these powerful properties to create the perfect placeholder experience! ⚙️
| Attribute | Description | Type | Default |
|---|---|---|---|
| image | Image type, can be set to error``network``search or image URL | string | default |
| image-size | Image size | *number | string |
| description | Description | string | - |
🎪 Slots
Customize every aspect of your empty state with these flexible slot options! 🎭
| Name | Description |
|---|---|
| default | Custom bottom content |
| image | Custom image |
| description | Custom description |
📝 Types
The component exports the following type definitions for enhanced TypeScript development experience! 💪
importtype { EmptyProps } from'vant';🎨 Theming
🎯 CSS Variables
Customize the visual appearance with these CSS variables to match your design system perfectly! 🌈
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-empty-padding | var(--van-padding-xl) 0 | - |
| --van-empty-image-size | 160px | - |
| --van-empty-description-margin-top | var(--van-padding-md) | - |
| --van-empty-description-padding | 0 60px | - |
| --van-empty-description-color | var(--van-text-color-2) | - |
| --van-empty-description-font-size | var(--van-font-size-md) | - |
| --van-empty-description-line-height | var(--van-line-height-md) | - |
| --van-empty-bottom-margin-top | 24px | - |
## 🔗 Related Docs
- [List](./list) - Data list display components
- [Search](./search) - Search input with empty states
- [Loading](./loading) - Loading state indicators
- [Skeleton](./skeleton) - Content placeholder loading
- [Image](./image) - Image display with error states
- [Button](./button) - Action buttons for empty states
- [Card](./card) - Container components
- [ConfigProvider](./config-provider) - Global configuration
- [Advanced Usage](./advanced-usage) - Advanced component techniques