vant/static/js/async/478.aa622b06.js

/*! For license information please see 478.aa622b06.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["478"],{87528:function(t,n,s){"use strict";s.r(n);var a=s("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Skeleton</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Used to display a set of placeholder graphics during the content loading process.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> {\n  <span class="hljs-title class_">Skeleton</span>,\n  <span class="hljs-title class_">SkeletonTitle</span>,\n  <span class="hljs-title class_">SkeletonImage</span>,\n  <span class="hljs-title class_">SkeletonAvatar</span>,\n  <span class="hljs-title class_">SkeletonParagraph</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Skeleton</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">SkeletonTitle</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">SkeletonImage</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">SkeletonAvatar</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">SkeletonParagraph</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">:row</span>=<span class="hljs-string">&quot;3&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="show-avatar" tabindex="-1">Show Avatar</h3>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">:row</span>=<span class="hljs-string">&quot;3&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="show-children" tabindex="-1">Show Children</h3>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">:row</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">:loading</span>=<span class="hljs-string">&quot;loading&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-skeleton</span>&gt;</span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref, onMounted } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n    <span class="hljs-keyword">const</span> loading = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">true</span>);\n\n    <span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> {\n      loading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n    });\n\n    <span class="hljs-keyword">return</span> {\n      loading,\n    };\n  },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="custom-content" tabindex="-1">Custom Content</h3>\n<p>Using <code>template</code> slots to custom skeleton content.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> #<span class="hljs-attr">template</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ display: &#x27;flex&#x27;, width: &#x27;100%&#x27; }&quot;</span>&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton-image</span> /&gt;</span>\n      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;{ flex: 1, marginLeft: &#x27;16px&#x27; }&quot;</span>&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton-paragraph</span> <span class="hljs-attr">row-width</span>=<span class="hljs-string">&quot;60%&quot;</span> /&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton-paragraph</span> /&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton-paragraph</span> /&gt;</span>\n        <span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton-paragraph</span> /&gt;</span>\n      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-skeleton</span>&gt;</span>\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="skeleton-props" tabindex="-1">Skeleton Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>row</td>\n<td>Row count</td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>row-width</td>\n<td>Row width, can be array</td>\n<td><em>number | string |<br>(number | string)[]</em></td>\n<td><code>100%</code></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Whether to show title placeholder</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>avatar</td>\n<td>Whether to show avatar placeholder</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Whether to show skeleton, pass <code>false</code> to show child component</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>animate</td>\n<td>Whether to enable animation</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>round</td>\n<td>Whether to show round title and paragraph</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>title-width</td>\n<td>Title width</td>\n<td><em>number | string</em></td>\n<td><code>40%</code></td>\n</tr>\n<tr>\n<td>avatar-size</td>\n<td>Size of avatar placeholder</td>\n<td><em>number | string</em></td>\n<td><code>32px</code></td>\n</tr>\n<tr>\n<td>avatar-shape</td>\n<td>Shape of avatar placeholder, can be set to <code>square</code></td>\n<td><em>string</em></td>\n<td><code>round</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="skeletonparagraph-props" tabindex="-1">SkeletonParagraph Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>round</td>\n<td>Whether to show round paragraph</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>row-width</td>\n<td>Paragraph width</td>\n<td><em>string</em></td>\n<td><code>100%</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="skeletontitle-props" tabindex="-1">SkeletonTitle Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>round</td>\n<td>Whether to show round title</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>title-width</td>\n<td>Title width</td>\n<td><em>number | string</em></td>\n<td><code>40%</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="skeletonavatar-props" tabindex="-1">SkeletonAvatar Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>avatar-size</td>\n<td>Size of avatar placeholder</td>\n<td><em>number | string</em></td>\n<td><code>32px</code></td>\n</tr>\n<tr>\n<td>avatar-shape</td>\n<td>Shape of avatar placeholder, can be set to <code>square</code></td>\n<td><em>string</em></td>\n<td><code>round</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="skeletonimage-props" tabindex="-1">SkeletonImage Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>image-size</td>\n<td>Size of image placeholder</td>\n<td><em>number | string</em></td>\n<td><code>32px</code></td>\n</tr>\n<tr>\n<td>image-shape</td>\n<td>Shape of image placeholder, can be set to <code>square</code></td>\n<td><em>string</em></td>\n<td><code>round</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="skeleton-slots" tabindex="-1">Skeleton Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>Default slot</td>\n</tr>\n<tr>\n<td>template</td>\n<td>Custom content</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> {\n  <span class="hljs-title class_">SkeletonProps</span>,\n  <span class="hljs-title class_">SkeletonImageProps</span>,\n  <span class="hljs-title class_">SkeletonTitleProps</span>,\n  <span class="hljs-title class_">SkeletonAvatarShape</span>,\n  <span class="hljs-title class_">SkeletonImageShape</span>,\n  <span class="hljs-title class_">SkeletonParagraphProps</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n</code></pre>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-skeleton-row-height</td>\n<td><em>16px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-row-background</td>\n<td><em>var(--van-active-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-row-margin-top</td>\n<td><em>var(--van-padding-sm)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-title-width</td>\n<td><em>40%</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-avatar-size</td>\n<td><em>32px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-avatar-background</td>\n<td><em>var(--van-active-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-duration</td>\n<td><em>1.2s</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-skeleton-image-size</td>\n<td><em>96px</em></td>\n<td></td>\n</tr>\n<tr>\n<td>--van-skeleton-image-radius</td>\n<td><em>24px</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,e))}}}]);