Chips
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) 항목을 명확하게 인식할 수 있도록 선택된 칩의 순서를 변경하거나, 선택된 항목만 따로 모아서 배치합니다.