S shadcn · 19

글 목록

Post list

글 카드를 줄지어 놓은 목록이에요. 아틀라스 화면에서는 큰 순번이 붙은 두 열 줄 목록으로 보여요.

쓰는 규칙놓인 자리가 넓으면 두 칸으로 — 화면 폭이 아니라 그 자리의 폭을 본다.

다른 이름: PostList
···
usage (Astro)
---
// src/pages/[post].astro
import { PostList } from '../components/registry';
---
<PostList heading="함께 읽으면 좋은 글" headingId="related" posts={related} />
props (TypeScript)
export interface PostListProps {
  posts: PostSummary[];
  heading?: string;
  headingId?: string;
  /** 목록 제목 단계(카드 제목은 그 아래 단계) */
  headingLevel?: 2 | 3;
  showCategory?: boolean;
  /** PostCard 변형 */
  variant?: VariantOf<'PostCard'>;
}

이 컴포넌트는 따로 변형이 없고 글 카드의 변형을 그대로 가져와요. 화면에서는 큰 회색 순번 01~06, 제목, 날짜·읽는 시간이 두 열로 나란히 놓이고 줄마다 가는 선이 있어요. thumb 는 넓이에 따라 한 줄에 한두 장 또는 세 장까지 카드가 놓여요.

어떤 모양으로 보일지는 글 카드를 어느 변형으로 고르느냐에 달려 있어요. 그래서 이 컴포넌트를 따로 고를 이유는 거의 없어요.

줄 목록(list·number)은 넓은 자리에서 두 열로 나뉘어요.

이럴 때 — 변형 1

  1. 기본기본 따로 고르지 않는다 — 글 카드 변형을 그대로 따른다.모든 사이트 — 글 카드 변형을 따른다
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.