Skeleton

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

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>
  );
}

Usage

import { Skeleton } from "@seed-design/react";

<Skeleton />

Props

Prop	Type	Default
`width?`	`"full" \| Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {})`	-
`height?`	`"full" \| Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {})`	-
`asChild?`	`boolean`	`false`
`radius?`	`"0" \| "8" \| "16" \| "full"`	`8`

Examples

Radius

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>
  );
}

Skeleton

Usage

Props

Examples

Radius

On this page