Skeleton
콘텐츠를 불러오는 동안 윤곽을 표시하는 컴포넌트입니다.
import { Skeleton, VStack } from "@seed-design/lynx-react";
export default function Example() {
return (
<VStack gap="x4" align="center" width="full" style={{ maxWidth: "250px" }}>
<Skeleton radius="full" width="48px" height="48px" />
<VStack gap="x2" align="center" width="full">
<Skeleton radius="8" width="250px" height="16px" style={{ maxWidth: "100%" }} />
<Skeleton radius="8" width="250px" height="16px" style={{ maxWidth: "100%" }} />
</VStack>
</VStack>
);
}
npm install @seed-design/lynx-react @seed-design/lynx-css
pnpm add @seed-design/lynx-react @seed-design/lynx-css
yarn add @seed-design/lynx-react @seed-design/lynx-css
bun add @seed-design/lynx-react @seed-design/lynx-css
import { Skeleton } from "@seed-design/lynx-react";
width?Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {}) | undefined
텍스트를 대체하는 Skeleton에는 height="lineHeight.t4"처럼 텍스트와 같은 line-height 토큰을 지정할 수 있습니다.
import { useState } from "@lynx-js/react";
import { Skeleton, Text, VStack } from "@seed-design/lynx-react";
import { Switch } from "@/components/ui/switch";
export default function Example() {
const [loading, setLoading] = useState(true);
return (
<VStack gap="x4" align="center" width="full" style={{ maxWidth: "250px" }}>
<VStack gap="x2" align="center" width="full">
{loading ? (
<Skeleton height="lineHeight.t7" width="200px" style={{ maxWidth: "100%" }} />
) : (
<Text textStyle="t7Bold">콘텐츠 제목</Text>
)}
{loading ? (
<Skeleton height="lineHeight.t4" width="250px" style={{ maxWidth: "100%" }} />
) : (
<Text textStyle="t4Regular">불러온 콘텐츠입니다.</Text>
)}
</VStack>
<Switch label="로딩 중" checked={loading} onCheckedChange={setLoading} />
</VStack>
);
}
import { HStack, Skeleton } from "@seed-design/lynx-react";
export default function Example() {
return (
<HStack
gap="x4"
align="center"
justify="center"
style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
>
<Skeleton radius="0" width="48px" height="48px" />
<Skeleton radius="8" width="48px" height="48px" />
<Skeleton radius="16" width="48px" height="48px" />
<Skeleton radius="full" width="48px" height="48px" />
</HStack>
);
}
import { Skeleton, VStack } from "@seed-design/lynx-react";
export default function Example() {
return (
<VStack gap="x4" align="center" width="full" style={{ maxWidth: "320px" }}>
<Skeleton tone="neutral" radius="16" width="full" height="48px" />
<Skeleton tone="magic" radius="16" width="full" height="48px" />
</VStack>
);
}
- 접근성 트리에서 숨겨지는 장식 요소입니다.
height에는 반응형 값이 아닌 단일 값만 전달할 수 있습니다.- 웹의
asChild는 지원하지 않습니다.