element-plus/assets/en-US_component_empty.md.a4f6ebdc.js

import{_ as c,a as r,b as i,c as d}from"./chunks/image-size.6fe32308.js";import{_ as u}from"./chunks/contributors.3486bd7a.js";import{c as E,a,w as o,u as p,b as t,d as e,e as C,r as m,o as h}from"./app.c3571ef0.js";const F=t("h1",{id:"empty",tabindex:"-1"},[e("Empty "),t("a",{class:"header-anchor",href:"#empty","aria-hidden":"true"},"#")],-1),g=t("p",null,"Placeholder hints for empty states.",-1),D=t("h2",{id:"basic-usage",tabindex:"-1"},[e("Basic usage "),t("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),b=t("p",null,"empty/basic-usage",-1),k=t("h2",{id:"custom-image",tabindex:"-1"},[e("Custom image "),t("a",{class:"header-anchor",href:"#custom-image","aria-hidden":"true"},"#")],-1),_=t("p",null,[e("Use "),t("code",null,"image"),e(" prop to set image URL.")],-1),y=t("p",null,"empty/custom-image",-1),f=t("h2",{id:"image-size",tabindex:"-1"},[e("Image size "),t("a",{class:"header-anchor",href:"#image-size","aria-hidden":"true"},"#")],-1),A=t("p",null,[e("Use "),t("code",null,"image-size"),e(" prop to control image size.")],-1),v=t("p",null,"empty/image-size",-1),B=t("h2",{id:"bottom-content",tabindex:"-1"},[e("Bottom content "),t("a",{class:"header-anchor",href:"#bottom-content","aria-hidden":"true"},"#")],-1),x=t("p",null,"Use the default slot to insert content at the bottom.",-1),z=t("p",null,"empty/bottom-content",-1),w=C('<h2 id="custom-styles" tabindex="-1">Custom styles <a class="header-anchor" href="#custom-styles" aria-hidden="true">#</a></h2><p>Now you can set custom style for empty component. Use <code>css/scss</code> language to change the global or local color. We set some global color variables: <code>--el-empty-fill-color-0</code>, <code>--el-empty-fill-color-1</code>, <code>--el-empty-fill-color-2</code>, ......, <code>--el-empty-fill-color-9</code>. You can use like: <code>:root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }</code>. But usually, if you want to change style, you need to change all color, because these colors are a combination.</p><h3 id="default-variables" tabindex="-1">Default Variables <a class="header-anchor" href="#default-variables" aria-hidden="true">#</a></h3><table><thead><tr><th>Variable</th><th>Color</th></tr></thead><tbody><tr><td>--el-empty-fill-color-0</td><td>var(--el-color-white)</td></tr><tr><td>--el-empty-fill-color-1</td><td>#fcfcfd</td></tr><tr><td>--el-empty-fill-color-2</td><td>#f8f9fb</td></tr><tr><td>--el-empty-fill-color-3</td><td>#f7f8fc</td></tr><tr><td>--el-empty-fill-color-4</td><td>#eeeff3</td></tr><tr><td>--el-empty-fill-color-5</td><td>#edeef2</td></tr><tr><td>--el-empty-fill-color-6</td><td>#e9ebef</td></tr><tr><td>--el-empty-fill-color-7</td><td>#e5e7e9</td></tr><tr><td>--el-empty-fill-color-8</td><td>#e0e3e9</td></tr><tr><td>--el-empty-fill-color-9</td><td>#d5d7de</td></tr></tbody></table><h2 id="empty-attributes" tabindex="-1">Empty Attributes <a class="header-anchor" href="#empty-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Acceptable Value</th><th>Default</th></tr></thead><tbody><tr><td>image</td><td>image URL</td><td>string</td><td>\u2014</td><td>\u2014</td></tr><tr><td>image-size</td><td>image size (width)</td><td>number</td><td>\u2014</td><td>\u2014</td></tr><tr><td>description</td><td>description</td><td>string</td><td>\u2014</td><td>\u2014</td></tr></tbody></table><h2 id="empty-slots" tabindex="-1">Empty Slots <a class="header-anchor" href="#empty-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td>Custom bottom content</td></tr><tr><td>image</td><td>Custom image</td></tr><tr><td>description</td><td>Custom description</td></tr></tbody></table><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/empty" target="_blank" rel="noopener noreferrer">Component</a> \u2022 <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/empty.md" target="_blank" rel="noopener noreferrer">Docs</a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-hidden="true">#</a></h2>',11),P='{"title":"Empty","description":"","frontmatter":{"title":"Empty","lang":"en-US"},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"Custom image","slug":"custom-image"},{"level":2,"title":"Image size","slug":"image-size"},{"level":2,"title":"Bottom content","slug":"bottom-content"},{"level":2,"title":"Custom styles","slug":"custom-styles"},{"level":3,"title":"Default Variables","slug":"default-variables"},{"level":2,"title":"Empty Attributes","slug":"empty-attributes"},{"level":2,"title":"Empty Slots","slug":"empty-slots"},{"level":2,"title":"Source","slug":"source"},{"level":2,"title":"Contributors","slug":"contributors"}],"relativePath":"en-US/component/empty.md","lastUpdated":1653314737000}',S={},R=Object.assign(S,{setup(U){const s={"../../examples/empty/basic-usage.vue":c,"../../examples/empty/bottom-content.vue":r,"../../examples/empty/custom-image.vue":i,"../../examples/empty/image-size.vue":d};return(V,T)=>{const n=m("Demo"),l=u;return h(),E("div",null,[F,g,D,a(n,{demos:p(s),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-empty%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20attr-name%22%3Edescription%3C%2Fspan%3E%3Cspan%20class%3D%22token%20attr-value%22%3E%3Cspan%20class%3D%22token%20punctuation%20attr-equals%22%3E%3D%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3Edescription%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20punctuation%22%3E%2F%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3C%2Fcode%3E%3C%2Fpre%3E",path:"empty/basic-usage","raw-source":"%3Ctemplate%3E%0A%20%20%3Cel-empty%20description%3D%22description%22%20%2F%3E%0A%3C%2Ftemplate%3E%0A",description:""},{default:o(()=>[b]),_:1},8,["demos"]),k,_,a(n,{demos:p(s),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-empty%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%20class%3D%22token%20attr-name%22%3Eimage%3C%2Fspan%3E%3Cspan%20class%3D%22token%20attr-value%22%3E%3Cspan%20class%3D%22token%20punctuation%20attr-equals%22%3E%3D%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3Ehttps%3A%2F%2Fshadow.elemecdn.com%2Fapp%2Felement%2Fhamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20punctuation%22%3E%2F%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3C%2Fcode%3E%3C%2Fpre%3E",path:"empty/custom-image","raw-source":"%3Ctemplate%3E%0A%20%20%3Cel-empty%0A%20%20%20%20image%3D%22https%3A%2F%2Fshadow.elemecdn.com%2Fapp%2Felement%2Fhamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png%22%0A%20%20%2F%3E%0A%3C%2Ftemplate%3E%0A",description:""},{default:o(()=>[y]),_:1},8,["demos"]),f,A,a(n,{demos:p(s),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-empty%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20attr-name%22%3E%3Aimage-size%3C%2Fspan%3E%3Cspan%20class%3D%22token%20attr-value%22%3E%3Cspan%20class%3D%22token%20punctuation%20attr-equals%22%3E%3D%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3E200%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20punctuation%22%3E%2F%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3C%2Fcode%3E%3C%2Fpre%3E",path:"empty/image-size","raw-source":"%3Ctemplate%3E%0A%20%20%3Cel-empty%20%3Aimage-size%3D%22200%22%20%2F%3E%0A%3C%2Ftemplate%3E%0A",description:""},{default:o(()=>[v]),_:1},8,["demos"]),B,x,a(n,{demos:p(s),source:"%3Cpre%20v-pre%3E%3Ccode%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-empty%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%3C%2Fspan%3Eel-button%3C%2Fspan%3E%20%3Cspan%20class%3D%22token%20attr-name%22%3Etype%3C%2Fspan%3E%3Cspan%20class%3D%22token%20attr-value%22%3E%3Cspan%20class%3D%22token%20punctuation%20attr-equals%22%3E%3D%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3Eprimary%3Cspan%20class%3D%22token%20punctuation%22%3E%22%3C%2Fspan%3E%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3EButton%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Eel-button%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%20%20%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Eel-empty%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20tag%22%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%26lt%3B%2F%3C%2Fspan%3Etemplate%3C%2Fspan%3E%3Cspan%20class%3D%22token%20punctuation%22%3E%3E%3C%2Fspan%3E%3C%2Fspan%3E%0A%3C%2Fcode%3E%3C%2Fpre%3E",path:"empty/bottom-content","raw-source":"%3Ctemplate%3E%0A%20%20%3Cel-empty%3E%0A%20%20%20%20%3Cel-button%20type%3D%22primary%22%3EButton%3C%2Fel-button%3E%0A%20%20%3C%2Fel-empty%3E%0A%3C%2Ftemplate%3E%0A",description:""},{default:o(()=>[z]),_:1},8,["demos"]),w,a(l,{id:"empty"})])}}});export{P as __pageData,R as default};