Filter
Filter는 사용자가 원하는 데이터를 빠르게 찾고 조합할 수 있도록 도와주는 컴포넌트입니다.
Filter
Filter는 사용자가 원하는 데이터를 빠르게 찾고 조합할 수 있도록 도와주는 컴포넌트입니다.
Filter
Filter는 사용자가 원하는 데이터를 빠르게 찾고 조합할 수 있도록 도와주는 컴포넌트입니다.
Anatomy
ESSENTIAL
1. Filter Button
필터 패널을 열고 적용 여부를 나타낸다. 적용된 필터가 있는 경우 활성화 상태(on), 없으면 비활성화(off) 상태로 표시한다.
2. Filter Header
패널의 최상단에 위치하며, 적용된 필터 개수를 나타내고 닫기(x) 버튼을 제공한다.
3. Filter Body
옵션은 아코디언, 체크박스, 라디오 버튼, 토글, 선택 가능한 chips 등 다양한 형태로 구성할 수 있다.
OPTIONAL
1. Filter Footer
모든 필터 초기화 및 적용 버튼으로 구성되며, 필터가 선택되었을 때만 활성화된다.
Anatomy
ESSENTIAL
1. Filter Button
필터 패널을 열고 적용 여부를 나타낸다. 적용된 필터가 있는 경우 활성화 상태(on), 없으면 비활성화(off) 상태로 표시한다.
2. Filter Header
패널의 최상단에 위치하며, 적용된 필터 개수를 나타내고 닫기(x) 버튼을 제공한다.
3. Filter Body
옵션은 아코디언, 체크박스, 라디오 버튼, 토글, 선택 가능한 chips 등 다양한 형태로 구성할 수 있다.
OPTIONAL
1. Filter Footer
모든 필터 초기화 및 적용 버튼으로 구성되며, 필터가 선택되었을 때만 활성화된다.
Anatomy
ESSENTIAL
1. Filter Button
필터 패널을 열고 적용 여부를 나타낸다. 적용된 필터가 있는 경우 활성화 상태(on), 없으면 비활성화(off) 상태로 표시한다.
2. Filter Header
패널의 최상단에 위치하며, 적용된 필터 개수를 나타내고 닫기(x) 버튼을 제공한다.
3. Filter Body
옵션은 아코디언, 체크박스, 라디오 버튼, 토글, 선택 가능한 chips 등 다양한 형태로 구성할 수 있다.
OPTIONAL
1. Filter Footer
모든 필터 초기화 및 적용 버튼으로 구성되며, 필터가 선택되었을 때만 활성화된다.
State
Control
Control
Control
Properties
filter | on,off |
Properties
filter | on,off |
Properties
filter | on,off |
Spec
Size |
| |
Customization |
| |
기타 |
| |
Spec
Size |
| |
Customization |
| |
기타 |
| |
Spec
Size |
| |
Customization |
| |
기타 |
| |
Usage
Do
필터 옵션이 많을 경우 검색 가능한 select 사용
Do
적용된 필터 개수를 항상 헤더에 명확히 표시
Do
필터 적용 버튼은 필터가 선택된 경우에만 활성화
Don't
sorting 기능은 필터 패널 내부에 포함하지 않는다
Don't
너무 많은 옵션을 아코디언 없이 한 번에 노출하지 않는다
Don't
필터 패널 외부에 있는 옵션 버튼과 필터 패널 내부 옵션의 상태를 다르게 관리하지 않는다
Usage
Do
필터 옵션이 많을 경우 검색 가능한 select 사용
Do
적용된 필터 개수를 항상 헤더에 명확히 표시
Do
필터 적용 버튼은 필터가 선택된 경우에만 활성화
Don't
sorting 기능은 필터 패널 내부에 포함하지 않는다
Don't
너무 많은 옵션을 아코디언 없이 한 번에 노출하지 않는다
Don't
필터 패널 외부에 있는 옵션 버튼과 필터 패널 내부 옵션의 상태를 다르게 관리하지 않는다
Usage
Do
필터 옵션이 많을 경우 검색 가능한 select 사용
Do
적용된 필터 개수를 항상 헤더에 명확히 표시
Do
필터 적용 버튼은 필터가 선택된 경우에만 활성화
Don't
sorting 기능은 필터 패널 내부에 포함하지 않는다
Don't
너무 많은 옵션을 아코디언 없이 한 번에 노출하지 않는다
Don't
필터 패널 외부에 있는 옵션 버튼과 필터 패널 내부 옵션의 상태를 다르게 관리하지 않는다
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us