Codex Proxy UI

主题

Skeleton 骨架屏 ​

在内容到达前保留页面的主要形状

交互示例 ​

查看用法代码
vue
<script setup lang="ts">
import { ZSkeleton } from '@codex-proxy/ui'
</script>

<template>
  <div style="display: grid; gap: 12px">
    <ZSkeleton shape="circle" style="width: 48px; height: 48px" />
    <ZSkeleton shape="text" style="width: 160px" />
    <ZSkeleton shape="text" style="width: 240px; max-width: 100%" />
  </div>
</template>

使用要点 ​

使用 shape 与尺寸组合占位，animated 控制动画

API ​

属性 ​

属性类型默认值说明
askeyof HTMLElementTagNameMap'span'根元素标签
shape'text' | 'block' | 'circle''block'占位形状，宽高由调用方设置
animatedbooleantrue播放加载动画，尊重减少动态效果设置