Select Control
여러 옵션 중 하나를 선택할 수 있도록 제공하는 선택 입력 요소입니다.
목록 형태의 옵션을 펼쳐 원하는 항목을 선택할 때 사용합니다.
컴포넌트 명세 (Component Specification)
분류 (Variant)
하단에 라인으로 구분된(line) 인풋과 전체 영역이 막힌(Solid) 인풋으로 분류됩니다.
사이즈 가이드 (Size Guide )
input/line/large의 경우, Medium(32px), Large(36px) 구분되어 사용됩니다.
input/solid의 경우, Small(36px), Medium(46px), Large(78px) 구분되어 사용됩니다.
상태 (State)
Input은 Disabled, Active, Error 상태값을 가집니다.
Use Case (사용 예시)
실제 서비스 화면에서 Input이 배치되고 활용되는 패턴입니다.
Button
“게시판 > 댓글"의 경우 우측에 댓글을 달 수 있는 버튼이 생성됩니다.
Scroll
Solid 인풋의 최대 높이는 78px입니다. 78px을 초과하는 경우 내부에
스크롤이 생성되며, 높이는 더 이상 확장되지 않습니다.
Icon
우측 혹은 좌측에 각 용도에 맞게 16px의 아이콘이 사용됩니다.
Unit
우측에 용도에 맞게 단위가 사용됩니다.
Select Control
단일 선택을 할 때 사용되는 라디오 형식의 Select Control입니다.
Title
input/line/medium의 경우, title은 상단에 위치합니다.
input/line/large의 경우, title은 좌측에 위치합니다.
Label
라벨이 반복될 때 너비값이 243px을 넘으면 밑으로 내려갑니다.
라벨이 포함된 영역의 높이값은 가변적이며, 가로 4px 세로 6px의 간격으로 라벨이 나열됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
Home
Portfolio