Context
๋ ์ด์์์ด ๋ก๋ฉ ๋ ๋ ๋ฏธ๋ฆฌ ๋ณด์ฌ์ฃผ๋ ์ปดํฌ๋ํธ์ธ Skeleton ์ปดํฌ๋ํธ์ ๋ถ์๊ณผ ์ดํด๋ฅผ ์ํด ์ด ๊ธ์ ์์ฑ
Agenda
โข
shadcn/ui์ Skeleton ์ปดํฌ๋ํธ๋ฅผ ๋ถ์ํ๊ณ ์ดํดํ๋ ๊ฒ์ ๋ชฉํ๋ก ํจ
Contents
import { cn } from '@ui/lib/utils';
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot='skeleton'
className={cn('bg-accent animate-pulse rounded-md', className)}
{...props}
/>
);
}
export { Skeleton };
TypeScript
๋ณต์ฌ
๊ฐ๋จํ ์ปดํฌ๋ํธ์ด๋ค. div์ ๋ฐฐ๊ฒฝ์๊ณผ ๋ชจ์๋ฆฌ์ radius ๊ทธ๋ฆฌ๊ณ ๋ก๋ฉ ์ค์์ ๋ํ๋ด๋ animate-pulse๋ฅผ ์ ์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ฑํ๋ค.