import{_asC,aasl,basc,casu,dasD,easi,fasF}from"./chunks/rendering-with-data.3f2753dd.js";import{_ask}from"./chunks/contributors.3486bd7a.js";import{casr,aasn,wase,uasE,basa,dass,easd,rasg,oasA}from"./app.c3571ef0.js";constm=a("h1",{id:"skeleton",tabindex:"-1"},[s("Skeleton "),a("a",{class:"header-anchor",href:"#skeleton","aria-hidden":"true"},"#")],-1),h=a("p",null,[s("When loading data, and you need a rich experience for visual and interactions for your end users, you can choose "),a("code",null,"skeleton"),s(".")],-1),v=a("h2",{id:"basic-usage",tabindex:"-1"},[s("Basic usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),B=a("p",null,"The basic skeleton.",-1),b=a("p",null,"skeleton/basic-usage",-1),y=a("h2",{id:"configurable-rows",tabindex:"-1"},[s("Configurable Rows "),a("a",{class:"header-anchor",href:"#configurable-rows","aria-hidden":"true"},"#")],-1),f=a("p",null,"You can configure the row numbers yourself, for more precise rendering effect, the actual rendered row number will always be 1 row more than the given number, that is because we are rendering a title row with 33% width of the others.",-1),w=a("p",null,"skeleton/configurable-rows",-1),x=a("h2",{id:"animation",tabindex:"-1"},[s("Animation "),a("a",{class:"header-anchor",href:"#animation","aria-hidden":"true"},"#")],-1),_=a("p",null,[s("We have provided a switch flag indicating whether showing the loading animation, called "),a("code",null,"animated"),s(" when this is true, all children of "),a("code",null,"el-skeleton"),s(" will show animation")],-1),q=a("p",null,"skeleton/animation",-1),S=a("h2",{id:"customized-template",tabindex:"-1"},[s("Customized Template "),a("a",{class:"header-anchor",href:"#customized-template","aria-hidden":"true"},"#")],-1),j=a("p",null,[s("Element Plus only provides the most common template, sometimes that could be a problem, so you have a slot named "),a("code",null,"template"),s(" to do that work.")],-1),I=a("p",null,"Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.",-1),L=a("p",null,"skeleton/customized-template",-1),T=a("h2",{id:"loading-state",tabindex:"-1"},[s("Loading state "),a("a",{class:"header-anchor",href:"#loading-state","aria-hidden":"true"},"#")],-1),M=a("p",null,[s("When "),a("code",null,"Loading"),s(" ends, we always need to show the real UI with data to our end users. with the attribtue "),a("code",null,"loading"),s(" we can control whether showing the DOM. You can also use slot "),a("code",null,"default"),s(" to structure the real DOM element.")],-1),U=a("p",null,"skeleton/loading-state",-1),O=a("h2",{id:"rendering-a-list-of-data",tabindex:"-1"},[s("Rendering a list of data "),a("a",{class:"header-anchor",href:"#rendering-a-list-of-data","aria-hidden":"true"},"#")],-1),z=a("p",null,[s("Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with "),a("code",null,"count"),s(" attribute, you can control how many these templates you need to render to the browser.")],-1),P=a("div",{class:"tip custom-block"},[a("p",{class:"custom-block-title"},"TIP"),a("p",null,[s("We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep "),a("code",null,"count"),s(" as small as it can be to make better user experience.")])],-1),R=a("p",null,"skeleton/rendering-with-data",-1),N=a("h2",{id:"avoiding-rendering-bouncing",tabindex:"-1"},[s("Avoiding rendering bouncing. "),a("a",{class:"header-anchor",href:"#avoiding-rendering-bouncing","aria-hidden":"true"},"#")],-1),V=a("p",null,[s("SometimesAPIre
