skeleton

Skeleton loader for a card grid

Skeleton loader for a card grid

Загрузка превью…

src/skeleton/c-skeleton-8.vue

<script setup lang="ts">
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
</script>

<template>
  <Card class="w-full max-w-xs">
    <CardHeader>
      <Skeleton class="aspect-video w-full" />
    </CardHeader>
    <CardContent class="space-y-2">
      <Skeleton class="h-4 w-3/4" />
      <Skeleton class="h-3 w-full" />
      <Skeleton class="h-3 w-2/3" />
    </CardContent>
    <CardFooter class="flex justify-between">
      <Skeleton class="h-8 w-20 rounded-md" />
      <Skeleton class="h-8 w-8 rounded-md" />
    </CardFooter>
  </Card>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-skeleton-8.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)