Chips

Written By Heesun .

GUIDE

Chips는 속성 또는 액션을 간결하게 표시하거나 정보를 필터링하는 컴포넌트입니다.

 

ANATOMY

  • Chips의 내용을 보조해줄 수 있는 아이콘을 선택적으로 표시할 수 있습니다.

  • Chips의 내용이 간결한 단어로 표기됩니다.

  • 이미 선택된 조건 리스트 중 일부를 지워 필터링 정보를 변경할 수 있습니다.
x 버튼을 누르면 칩이 리스트에서 제외되고 뒷 순서에 있던 칩들이 빈 공간으로 밀려와 재정렬됩니다.

  • 복수 선택을 명확하게 표기하기 위해 사용합니다.

  • Chips의 요소가 담긴 배경 영역으로 면(filled)이나 외곽선(outlined)으로 구성됩니다.
Label에 따라 각 컨테이너의 너비가 변경됩니다.

SIZE

text와 icon으로 구성된 Chips는 아래와 같은 사이즈로 제공합니다.

label : 14px semibold
icon : 16px
button : 20px
horizontal-padding : 8px
vertical-padding : 6px
padding-between : 8px
max width : 200px

STATES

Chips의 상태별 정의는 다음과 같습니다.

USAGE

속성 또는 액션을 간결하게 표시해 컨텐츠를 필터링하는 용도에 사용합니다.

1. Label

2. Selection

3. Function

PLACEMENT

  • Chip은 좌측에서 우측으로 나열합니다.

  • 남은 마진보다 다음 Chip의 너비가 길 경우 다음 행에 배치합니다.

  • 모바일 환경에서 스와이프 이용 시 스와이프가 가능한 영역임을 사용자가 인지할 수 있도록
배치되어야 합니다. 스와이프 이용 시 사용자가 선택한(pressed) 항목을 명확하게 인식할 수 있도록
선택된 칩의 순서를 변경하거나, 선택된 항목만 따로 모아서 배치합니다.

Heesun .
Previous

Pagination
Next

Dropdown