Chips
Components
Filter Chips는 칩 중 하나를 선택할 경우 즉각적으로 반영된 액션과 데이터가 나타납니다. Basic Filter Chips는 최소 두 가지 옵션이 있는 경우 필터링을 목적으로 사용합니다. 브랜드와 상품 등 맞춤형 필터링이 필요한 경우 큐레이션 Curation Filter Chips를 사용합니다.
- A
- B
Option Chips는 칩 중 하나를 선택할 경우 현재 페이지가 유지됩니다. Active 시 즉각적으로 반영된 액션과 변화가 저장되며 과업 완료 버튼을 누르기 전까지 유지됩니다. 칩 중 하나를 선택 시, 변화가 없는 경우가 Basic Option Chips입니다.
- C
Basic Filter Chips
Basic Filter Chips는 최소 두 가지 옵션이 있는 경우에 필터링을 목적으로 사용되며, 사용자는 한 가지만 선택할 수 있습니다. 위치 이동은 불가하며 경우에 따라 삭제만 가능합니다.
Anatomy
Variants
State
Basic Filter Chips는 Selected/Unselected에 따라 Default, Active, Disabled 상태로 분류됩니다. Selected는 Active된 상태로 간주됩니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Status | Selected, Unselected | Unselected |
| State | Active, Default, Disabled | Default |
| Icon | False, True | False |
Behaviors
Scroll the screen
칩이 디바이스의 Width를 넘어갈 경우, 가로 스크롤이 적용됩니다.
Usage Guidelines
Do : Basic Filter Chips 스타일, 정렬 기준 변동
칩이 Tab으로 활용된 케이스의 칩은 Basic Filter Chips로 간주합니다. Background에 사진이 사용된 케이스는 Ghost, Outline 스타일을 적용할 수 있습니다. 페이지 전체 콘텐츠의 정렬에 따라 칩의 정렬 기준도 변경이 가능합니다.
Spec
Color
Active 시 Filter Chips 컬러는 해당 화면 카테고리 색상이 적용됩니다.
Text Byte
칩 하나 당 최대 글자 수는 10자(22byte, 공백 포함)로 제한됩니다. 최대 글자 수를 넘어갈 경우 말줄임 처리됩니다.
Placement
좌측 정렬을 기본으로, 두 줄 형 사용이 가능합니다. 좌측 마진은 16으로 고정이며, 칩 간의 x축 간 간격 4, y축 간 간격 8을 적용합니다.
Curation Filter Chips
Curation Filter Chips는 브랜드, 상품 카테고리, 가격, 연관검색어 등 맞춤형 추천 시 필터링을 목적으로 사용됩니다. 위치 이동과 삭제가 불가능합니다.
Anatomy
Variants
State
Curation Filter Chips는 Selected/Unselected에 따라 Default, Active, Disabled 상태로 분류됩니다. Selected는 Active된 상태로 간주됩니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Status | Selected, Unselected | Unselected |
| State | Active, Default, Disabled | Default |
| Icon | False, True | False |
Behaviors
Scroll the screen
칩이 디바이스의 Width를 넘어갈 경우, 가로 스크롤이 적용됩니다.
Spec
Color
컬러는 테마 별 지정된 컬러의 400,600,500,700 값이 반복 적용됩니다. Active 시, 해당 색상 값에서 200을 더한 값이 적용됩니다.
Placement
좌측 정렬을 기본으로, 칩 간의 x축 간격 4를 적용합니다. 두 줄 형 사용이 제한됩니다.
Basic Option Chips
Basic Option Chips는 다수의 선택지가 있는 경우 선택지 나열을 위해 사용됩니다. 하나의 칩이 적용되면 다른 칩은 선택할 수 없습니다. 위치 이동과 삭제가 불가능합니다.
Anatomy
Variants
State
Basic Option Chips는 Selected/Unselected에 따라 Default, Active, Disabled 상태로 분류됩니다. Selected는 Active된 상태로 간주됩니다.
| Property | Values | Default Value |
|---|---|---|
| Status | Selected, Unselected | Unselected |
| State | Active, Default, Disabled | Default |
| Icon | False, True | False |
Usage Guidelines
Do : Basic Option Chips 정렬 기준 변경
페이지 전체 콘텐츠의 정렬에 따라 칩의 정렬 기준도 변경이 가능합니다.
Spec
Placement
좌측 정렬을 기본으로, 칩 간의 x축과 y축 간격 8을 적용합니다. 칩이 디바이스 Width를 넘어갈 경우, 줄 바꿈이 적용됩니다.
