ドキュメント
スケルトン
スケルトン
コンテンツが読み込み中の間、プレースホルダーを表示するために使用します。
import { Skeleton } from "@repo/tailwindcss/ui/skeleton";
const SkeletonDemo = () => {
return (
<div class="flex items-center space-x-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
);
};
export default SkeletonDemo;インストール
npx shadcn-solid@latest add skeleton以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import { type ComponentProps, splitProps } from "solid-js";
export const Skeleton = (props: ComponentProps<"div">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<div
class={cn("animate-pulse rounded-md bg-primary/10", local.class)}
{...rest}
/>
);
};以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import { type ComponentProps, splitProps } from "solid-js";
export const Skeleton = (props: ComponentProps<"div">) => {
const [local, rest] = splitProps(props, ["class"]);
return (
<div
class={cn("animate-pulse rounded-md bg-primary/10", local.class)}
{...rest}
/>
);
};使用方法
import { Skeleton } from "@/components/ui/skeleton";<Skeleton class="w-100px h-20px rounded-full" />