1. 리스트: 테이블(List: Table)의 정의

리스트 테이블은 한 화면에서 많은 항목의 정보를 동일한 형태로 나열하여 제공합니다.
주로 게시판과 같이 시스템에서 제공하는 동일한 형태의 정보 리스트를 제공할 때 사용됩니다.

2. 유형

• 리스트 테이블

  

• 목록 선택 리스트 테이블

  

• 이미지 리스트 테이블

  

3. 구성 옵션

• 

• 컨테이너

  테이블 전체를 의미합니다.

• 

• 테이블 헤더

  나열되는 각 항목들의 목록을 제공합니다.
  각 항목의 수에 따라 여러 목록을 제공할 수 있습니다.

• 

• 리스트

  리스트의 높이는 내용에 따라 여러 줄로 확장할 수 있습니다.
  내용에 따라 동일한 행 높이를 제공하지 않을 수 있지만 가능한 일관성 있는 높이를 제공하는 것이 좋습니다.
  리스트에는 체크박스, 이미지, 제목과 내용 텍스트, 첨부파일 아이콘, 태그 등 여러 요소를 포함할 수 있습니다.

• 

• 체크박스

  체크박스 구성 요소 적용 시 헤더 영역의 체크박스는 선택 시 리스트 전체가 선택되는 기능을 합니다.

4. 사용 규칙

• 

• 리스트 구성은 가능한 동일하게 제공합니다.

  리스트를 구성하고 있는 정보의 형태는 모두 동일하게 제공되는 것이 좋습니다.
  만약 이미지를 포함하는 리스트의 경우 이미지가 없다면 기본 이미지를 제공하여 시각적인 일관성을 유지하는 것이 좋습니다.

• 

• 스크롤 될 리스트가 있는 경우 표시할 것을 권장합니다.

  리스트 항목이 한 화면에 모두 표시되지 않는 경우 페이지네이션 구성 요소를 함께 사용하거나 스크롤을 제공해 더 많은 정보가 있음을 표시해야 합니다.

5. 상황에 따른 상태

• Normal

  

• Hover

  

• Selected

  

• Mixed heights

  

6. 배치

콘텐츠 영역에 그리드 영역에 맞춰 배치할 수 있습니다.

스타일

크기

데이터 테이블 컴포넌트는 2가지 크기로 구분됩니다. 현장 업무용, 사무실용 등 정보량과 환경에 따라 크기를 지정하여 사용합니다.

• 리스트: 56

  

• 이미지 리스트: 56

  

• 리스트: 40

  

• 이미지 리스트: 40

  

• 최대 크기

  

컬러

화이트 테마

상태별 컬러는 리튬 디자인 가이드 컬러 규칙에 맞추어져 있으며, 아래 구성을 참고하여 활용합니다.

• 

• 

• 

• 

• 

다크 테마

상태별 컬러는 리튬 디자인 가이드 컬러 규칙에 맞추어져 있으며, 아래 구성을 참고하여 활용합니다.

• 

• 

• 

• 

• 

리스트: 테이블 (List: TABLE)