/*! 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:'Skeleton
\nIntro
\n
Used to display a set of placeholder graphics during the content loading process.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport {\n Skeleton,\n SkeletonTitle,\n SkeletonImage,\n SkeletonAvatar,\n SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n
Usage
\nBasic Usage
\n
<van-skeleton title :row="3" />\n
\n
Show Avatar
\n
<van-skeleton title avatar :row="3" />\n
\n
Show Children
\n
<van-skeleton title avatar :row="3" :loading="loading">\n <div>Content</div>\n</van-skeleton>\n
\n
import { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const loading = ref(true);\n\n onMounted(() => {\n loading.value = false;\n });\n\n return {\n loading,\n };\n },\n};\n
\n
Custom Content
\n
Using template slots to custom skeleton content.
\n
<van-skeleton>\n <template #template>\n <div :style="{ display: 'flex', width: '100%' }">\n <van-skeleton-image />\n <div :style="{ flex: 1, marginLeft: '16px' }">\n <van-skeleton-paragraph row-width="60%" />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n <van-skeleton-paragraph />\n </div>\n </div>\n </template>\n</van-skeleton>\n
\n
API
\nSkeleton Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| row | \nRow count | \nnumber | string | \n0 | \n
\n\n| row-width | \nRow width, can be array | \nnumber | string |
(number | string)[] | \n100% | \n
\n\n| title | \nWhether to show title placeholder | \nboolean | \nfalse | \n
\n\n| avatar | \nWhether to show avatar placeholder | \nboolean | \nfalse | \n
\n\n| loading | \nWhether to show skeleton, pass false to show child component | \nboolean | \ntrue | \n
\n\n| animate | \nWhether to enable animation | \nboolean | \ntrue | \n
\n\n| round | \nWhether to show round title and paragraph | \nboolean | \nfalse | \n
\n\n| title-width | \nTitle width | \nnumber | string | \n40% | \n
\n\n| avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
\n\n| avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
\n\n
\n
SkeletonParagraph Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| round | \nWhether to show round paragraph | \nboolean | \nfalse | \n
\n\n| row-width | \nParagraph width | \nstring | \n100% | \n
\n\n
\n
SkeletonTitle Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| round | \nWhether to show round title | \nboolean | \nfalse | \n
\n\n| title-width | \nTitle width | \nnumber | string | \n40% | \n
\n\n
\n
SkeletonAvatar Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| avatar-size | \nSize of avatar placeholder | \nnumber | string | \n32px | \n
\n\n| avatar-shape | \nShape of avatar placeholder, can be set to square | \nstring | \nround | \n
\n\n
\n
SkeletonImage Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| image-size | \nSize of image placeholder | \nnumber | string | \n32px | \n
\n\n| image-shape | \nShape of image placeholder, can be set to square | \nstring | \nround | \n
\n\n
\n
Skeleton Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nDefault slot | \n
\n\n| template | \nCustom content | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type {\n SkeletonProps,\n SkeletonImageProps,\n SkeletonTitleProps,\n SkeletonAvatarShape,\n SkeletonImageShape,\n SkeletonParagraphProps,\n} from 'vant';\n
\n
Theming
\nCSS 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| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-skeleton-row-height | \n16px | \n- | \n
\n\n| --van-skeleton-row-background | \nvar(--van-active-color) | \n- | \n
\n\n| --van-skeleton-row-margin-top | \nvar(--van-padding-sm) | \n- | \n
\n\n| --van-skeleton-title-width | \n40% | \n- | \n
\n\n| --van-skeleton-avatar-size | \n32px | \n- | \n
\n\n| --van-skeleton-avatar-background | \nvar(--van-active-color) | \n- | \n
\n\n| --van-skeleton-duration | \n1.2s | \n- | \n
\n\n| --van-skeleton-image-size | \n96px | \n | \n
\n\n| --van-skeleton-image-radius | \n24px | \n- | \n
\n\n
\n