Select List
선택 가능한 항목들을 리스트 형태로 제공하는 컴포넌트입니다.
단일 또는 복수 항목을 빠르게 선택할 때 사용합니다.
컴포넌트 명세 (Component Specification)
분류 (Variant)
Select Control 의 위치에 따라서 Select List 1,2로 구분됩니다. Select Control이 왼쪽에 있을 때에는 Select List1, 오른쪽에 있을 때에는 Select List 2로 사용됩니다.
상태 (State)
선택 유무에 따라서 Default, Active 상태로 구분되어 사용됩니다.
사이즈 가이드 (Size Guide )
선택 리스트의 너비는 Fill로 채워져서 사용되고, 높이는 내부 콘텐츠에 따라서 Hug로 사용됩니다. 좌우 여백은 16px로 고정됩니다.
구조 (Structure)
Select List 1은 좌측부터 Select Control·Profile·Title·Caption으로 나뉘어서 구성되어 있습니다. Select List 2는 좌측부터 Title·Sub로 나뉘어서 구성되어 있습니다.
용도에 따라서 Property를 조정하여 사용합니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Select List가 배치되고 활용되는 패턴입니다.
선택 리스트 (Select List)
위 아래 0px로 완전히 붙어서 사용됩니다.
타이틀 선택 리스트 (Select List 1 - Title)
기본적으로 사용되는 선택 리스트입니다.
설명 선택 리스트 (Select List 1 - Description)
설명이 필요할 때 사용되는 선택 리스트입니다.
캡션 선택 리스트 (Select List 1 - Caption)
캡션이 필요할 때 사용되는 선택 리스트입니다.
라벨 선택 리스트 (Select List 1 - Label)
라벨과 캡션이 필요할 때 사용되는 선택 리스트입니다.
프로필 선택 리스트 (Select List 1 - Profile)
프로필이 필요할 때 사용되는 선택 리스트입니다.
더블 타이틀 선택 리스트 (Select List 1 - Double Title)
2개의 타이틀과 설명이 필요할 때 사용되는 선택 리스트입니다.
선택 리스트 2 (Select List 2)
주로 여러 항목 중 값을 선택하거나, 선택 상태를 직관적으로 확인해야 하는 리스트에서 사용됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
