Tantalum UI

Appearance

Return to top
On this page

Skeleton 骨架屏

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-skeleton-panel">
      <ta-skeleton />
    </div>
  </ta-group>
  <ta-group title="显示头像">
    <div class="exp-skeleton-panel">
      <ta-skeleton avatar />
    </div>
  </ta-group>
  <ta-group title="带动画">
    <div class="exp-skeleton-panel">
      <ta-skeleton avatar :animated="animated" :avatarShape="avatarShape" />
    </div>
  </ta-group>
  <ta-group title="显示子组件">
    <div class="exp-skeleton-panel">
      <div class="exp-skeleton-switch">
        <ta-switch v-model="loadingSwitch" />
      </div>
      <ta-skeleton avatar :loading="!loadingSwitch">
        <div class="exp-skeleton-sub-component">
          <ta-icon icon="HeartFilled" size="32" />
          <h4 class="title">hello World</h4>
          <p class="paragraph">简单不先于复杂，而是在复杂之后。</p>
        </div>
      </ta-skeleton>
    </div>
  </ta-group>
  <ta-group title="自由组合">
    <div class="exp-skeleton-panel">
      <ta-skeleton class="exp-skeleton-custom" :buttonShape="buttonShape">
        <template #layout>
          <ta-skeleton-image />
          <ta-skeleton-title />
          <ta-skeleton-paragraph :row="2" />
          <ta-skeleton-button />
        </template>
      </ta-skeleton>
    </div>
  </ta-group>
</template>

<script lang="ts">
import type { SkeletonAvatarShape, SkeletonButtonShape } from '@/index'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'ExpSkeleton',
  setup() {
    const animated = ref(true)
    const avatarShape = ref<SkeletonAvatarShape>('circle')
    const buttonShape = ref<SkeletonButtonShape>('default')
    const loadingSwitch = ref(false)

    return {
      animated,
      avatarShape,
      buttonShape,
      loadingSwitch
    }
  }
})
</script>

Import

js
import { TaSkeleton } from 'tantalum-ui-mobile'

如果想要自定义布局，可以再引入子组件：

js
import {
  SkeletonAvatar,
  SkeletonImage,
  SkeletonTitle,
  SkeletonParagraph,
  SkeletonButton
} from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { SkeletonAvatarShape, SkeletonButtonShape } from 'tantalum-ui-mobile'

Skeleton Props

属性类型默认值必填说明
loadingbooleantrue否是否显示骨架屏，传 false 时会展示子组件内容
avatarbooleanfalse否是否显示头像占位图
animatedbooleanfalse否是否开启动画
avatar-shapeSkeletonAvatarShape'default'否可选 'default', 'circle'
button-shapeSkeletonButtonShape'default'否可选 'default', 'round'
paragraph-rownumber3否段落占位图行数

Skeleton Slots

#default

vue
<ta-skeleton>
  <div>详情...</div>
</ta-skeleton>

骨架屏重新布局（#layout）

还可以在 layout 插槽中重新组合骨架屏，目前提供 SkeletonAvatar、SkeletonImage、SkeletonTitle、SkeletonParagraph、SkeletonButton 5 款子组件。

vue
<ta-skeleton>
  <template #layout>
    <ta-skeleton-image></ta-skeleton-image>
    <ta-skeleton-title></ta-skeleton-title>
    <ta-skeleton-paragraph></ta-skeleton-paragraph>
  </template>
  <div>详情...</div>
</ta-skeleton>

SkeletonAvatar Props

属性类型默认值必填说明
shapeSkeletonAvatarShape'default'否可选 'default', 'circle'
animatedbooleanfalse否是否开启动画，仅在单独使用头像骨架时生效

SkeletonImage Props

属性类型默认值必填说明
animatedbooleanfalse否是否开启动画，仅在单独使用头像骨架时生效

SkeletonTitle Props

属性类型默认值必填说明
animatedbooleanfalse否是否开启动画，仅在单独使用头像骨架时生效

SkeletonParagraph Props

属性类型默认值必填说明
rownumber3否段落占位图行数
animatedbooleanfalse否是否开启动画，仅在单独使用头像骨架时生效

SkeletonButton Props

属性类型默认值必填说明
shapeSkeletonButtonShape'default'否可选 'default', 'round'
animatedbooleanfalse否是否开启动画，仅在单独使用头像骨架时生效