목록 페이지
ListPage여러 항목을 목록으로 보여주는 화면입니다. 위쪽에 제목과 주요 버튼, 그 아래 검색·필터 줄, 가운데 목록(표나 카드), 맨 아래 페이지 이동이 놓입니다.
가져오기
tsx
import { ListPage } from "@tissue-ui/layout-react";미리보기
표로 보기
제목·검색·표·페이지 이동이 갖춰진 가장 흔한 목록.
사용자
2| 번호 | 이름 | 역할 | 상태 |
|---|---|---|---|
| 2 | 홍길동 | 관리자 | 활성 |
| 1 | 김영희 | 편집자 | 대기 |
카드 그리드로 보기
표 대신 본문 자리에 카드 격자를 넣습니다(상품·갤러리 목록에 적합).
상품
티셔츠
재고 12개 · ₩12,000
머그컵
재고 12개 · ₩12,000
스티커
재고 12개 · ₩12,000
빈 목록
항목이 없을 때는 본문 자리에 빈 상태를 넣어 다음 행동을 안내합니다.
주문
아직 주문이 없습니다
첫 주문이 들어오면 여기에 표시됩니다.
선택 · 일괄 작업
표에서 여러 행을 고르고 상단 도구 줄에서 한꺼번에 처리합니다.
구독자
1 선택| 번호 | 이름 | 역할 | 상태 | |
|---|---|---|---|---|
| 2 | 홍길동 | 관리자 | 활성 | |
| 1 | 김영희 | 편집자 | 대기 |
슬롯 (5)
자리마다 넣을 수 있는 요소가 아래에 있습니다. 파란색은 눌러서 컴포넌트 문서로 갈 수 있고, 회색은 실제 컴포넌트가 아니라 직접 만들거나 다른 패키지에서 가져와 채우는 자리입니다.
header머리말필수여러 개layout: space-between
toolbar.left도구 줄 (왼쪽)선택여러 개layout: row
검색 입력필터 드롭다운탭
toolbar.right도구 줄 (오른쪽)선택여러 개layout: row
주요 버튼필터 드롭다운
body본문필수layout:
footer바닥글선택layout:
페이지 이동
어떤 자리에 무엇을 넣을 수 있는지는
LAYOUT_MANIFEST 에 정리돼 있습니다. 코드에서 확인하려면 isElementAllowed(아키타입, 슬롯, 요소) 함수를 쓰세요.