Skeleton
콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.
import { Skeleton, VStack } from "@seed-design/react";
export default function SkeletonPreview() {
return (
<VStack gap="x4" align="center">
<Skeleton radius="full" width="x12" height="x12" />
<VStack direction="column" gap="x2">
<Skeleton radius="8" height="x4" width="250px" />
<Skeleton radius="8" height="x4" width="250px" />
</VStack>
</VStack>
);
}
import { Skeleton } from "@seed-design/react";
height?ResponsiveValue<"full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined
width?ResponsiveValue<"full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {})> | undefined
import { Flex, Skeleton } from "@seed-design/react";
export default function SkeletonRadius() {
return (
<Flex gap="x4" align="center">
<Skeleton radius="0" width="x12" height="x12" />
<Skeleton radius="8" width="x12" height="x12" />
<Skeleton radius="16" width="x12" height="x12" />
<Skeleton radius="full" width="x12" height="x12" />
</Flex>
);
}
import { Box, Skeleton, VStack } from "@seed-design/react";
export default function SkeletonTone() {
return (
<VStack gap="x4" alignItems="flex-start" width="full">
<Skeleton tone="neutral" radius="16" width="full" height="x12" />
<Skeleton tone="magic" radius="16" width="full" height="x12" />
</VStack>
);
}