Components
Skeleton
데이터가 오기 전 지면의 실루엣.
import { Skeleton } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}> <Skeleton width={96} aspectRatio="3 / 4" radius="lg" /> <div style={{ display: 'grid', gap: 8, flex: 1, maxWidth: 260 }}> <Skeleton width="60%" height="1rem" /> <Skeleton width="90%" height="0.75rem" /> <Skeleton width="40%" height="0.75rem" /> </div> </div> )}치수는 단일값 props 로만 받는다
@media 분기가 필요하면 className 으로 밉니다. 인라인 style 은 미디어쿼리를 못 담고,
그걸 담으려면 CSS 변수 배선이나 sprinkles 축 확장이 따라오는데 둘 다 이 컴포넌트 밖의
결정입니다.
aria-hidden 은 기본으로 붙는다
자리표시자는 스크린리더가 읽을 내용이 아니고, 실측상 소비처가 가장 자주 빠뜨린 것이 이 한
줄입니다. 로딩 상태를 알려야 하면 그건 이 컴포넌트가 아니라 role="status" 를 가진 바깥
컨테이너의 몫입니다.
이미 치수를 가진 스타일과 합성할 때
<Skeleton asChild>
<div className={styles.poster} />
</Skeleton>Props
Prop
Type
그 밖의 ComponentPropsWithRef<'div'> 속성은 루트 엘리먼트로 그대로 통과한다.