Skeleton
콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.
@seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0
import "./styles";
import { Skeleton, useSeedClassName, VStack } from "@seed-design/lynx-react";
export default function Example() {
const seedClassName = useSeedClassName({ colorMode: "system" });
return (
<view className={`${seedClassName} docs-lynx-skeleton-root`}>
<view className="skeleton-preview">
<VStack gap="x4" align="center">
<Skeleton radius="full" width="48px" height="48px" />
<VStack gap="x2">
<Skeleton radius="8" width="250px" height="16px" />
<Skeleton radius="8" width="250px" height="16px" />
</VStack>
</VStack>
</view>
</view>
);
}
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";
style?CSSProperties | undefined
className?string | undefined
width?"full" | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
height?"full" | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
import "./styles";
import { HStack, Skeleton, useSeedClassName } from "@seed-design/lynx-react";
export default function Example() {
const seedClassName = useSeedClassName({ colorMode: "system" });
return (
<view className={`${seedClassName} docs-lynx-skeleton-root`}>
<view className="skeleton-preview">
<HStack gap="x4" align="center">
<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>
</view>
</view>
);
}
import "./styles";
import { Skeleton, useSeedClassName, VStack } from "@seed-design/lynx-react";
export default function Example() {
const seedClassName = useSeedClassName({ colorMode: "system" });
return (
<view className={`${seedClassName} docs-lynx-skeleton-root`}>
<view className="skeleton-preview">
<VStack gap="x4" align="flex-start" width="full">
<Skeleton tone="neutral" radius="16" width="full" height="48px" />
<Skeleton tone="magic" radius="16" width="full" height="48px" />
</VStack>
</view>
</view>
);
}
- 웹은 HTML
<div>와 CSS pseudo-element로 shimmer를 렌더링하고, Lynx는 네이티브 <view> root와 shimmer child를 렌더링합니다.
- Lynx는 Skeleton을 장식 요소로 취급해 root와 shimmer child를
accessibility-elements-hidden으로 접근성 트리에서 숨깁니다.
- Lynx 공개 API는
radius, tone, width, height, className, style, root <view> ref를 제공하며 children, 이벤트, 상태 API는 제공하지 않습니다.