List

Anatomy

List Item은 Suffix, Prefix, Title, Detail로 구성됩니다.

배경색은 가이드에서 시각적 구분을 위해 추가된 것이며, 컴포넌트 자체에는 배경색이 지정되어 있지 않습니다.

Properties

Single, Multi Line Variants

Single Line은 한 줄로만 제목, 설명이 표시됩니다. Multi Line은 제목, 설명이 두 줄 이상으로 표시될 수 있습니다. 필요한 경우 사용처에서 최대 표시 줄 수를 정의해주세요.

Multi Line으로 활용하는 경우 Suffix, Prefix가 상단 정렬로 고정됩니다.

Highlighted Property

List 컴포넌트의 Highlighted prop은 새로운 알림이나 업데이트처럼 사용자의 주목이 필요한 항목을 시각적으로 강조할 때 사용합니다.

List State

List 컴포넌트는 Enabled, Pressed, Disabled 상태를 제공합니다.

Prefix Property

Prefix Slot은 List 좌측에 위치합니다. List Item 컴포넌트는 Prefix에 여러가지 타입을 프리셋 형태로 제공합니다. 포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.

Suffix Property

Suffix는 List 우측에 위치합니다. List Item 컴포넌트는 Suffix에 여러가지 타입을 프리셋 형태로 제공합니다. 포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.

Detail Property

Detail은 List 제목 하단에 위치합니다. Sub Text, Tag Group을 기본으로 제공하며 사용처 필요에 따라서 Custom해서 사용할 수 있습니다.

Guidelines

List, List Item 사용하기

List Item은 정보를 가로 행으로 묶어서 표현되는 컴포넌트로 사용자가 빠르게 인지하고 단순한 액션을 필요로 할 때 사용해야 합니다. List는 여러개의 List Item을 묶어서 연속된 열로 표현해야할 때 사용합니다.

List의 부모 컨테이너는 사용처의 의도에 맞게 자유롭게 사용할 수 있습니다.

List Header로 묶어서 사용하기

List를 그룹 단위로 묶어서 표현할 수 있도록 List Header 컴포넌트를 제공합니다.

List Item 클리커블 사용하지 않기

List Item은 클리커블 동작을 기본으로 포함하고 있습니다. 사용처에서는 의도와 플로우, 맥락에 따라서 클리커블을 직접 제거해서 사용할 수 있습니다.

List Item 내부 간격 조정

Don’t

내부 간격을 조정할 때 각 Item의 정렬은 일관되어야 합니다.

List Item는 높이, 넓이 패딩 간격을 갖고 있으며, 사용처 의도에 따라서 자유롭게 조정해서 사용할 수 있습니다.

• 간격은 SEED에서 제공하는 Token을 활용해주세요.
• 넓이 간격을 조정할 때는 {global-gutter=16px} 보다 좁아지지 않도록 주의해주세요.
• 내부 간격을 조정할 때 List 안에서 각 Item의 정렬이 달라지지 않도록 조심하세요.

List Item 클리커블

List Item은 기본으로 클릭 동작을 제공하며 여러개의 상호작용 가능한 요소와 조합되어 사용할 수 있습니다. List에서 제공하는 Button 컴포넌트 이외에 다른 요소를 Custom하게 사용할 경우 별도 Spec으로 동작 명세를 정의해주세요.

Don’t

하나의 List Item에 4개 이상 상호작용 요소를 구성하는 것은 지양합니다.

List Item은 표현 공간에 제약이 있기 때문에 복잡하게 상호작용 요소를 조합하지 마세요.

Concentric Radius

List Item을 포함하는 컨테이너의 모서리 반경(radius)에 맞춰 항목의 pressed-inset radius를 유연하게 조정할 수 있습니다.

리스트가 R값을 가진 카드 컨테이너 안에 포함될 때, 컨테이너와 동일한 반경을 그대로 적용하면 시각적으로 반경이 맞지 않게 보일 수 있습니다.

이를 위해 내부 요소의 Radius는 상위 컨테이너의 반경에서 내부 패딩 값만큼 빼서 적용합니다. 예를 들면, 카드 컨테이너의 Radius가 16px, 카드의 Padding이 6px인 경우, 내부 리스트의 Radius는 = 16px - 6px = 10px입니다.

List Item을 Select로 Custom하기

List Item에 Checkbox, Radio Mark를 조합한다면 Select로 사용할 수 있습니다. Checkbox는 Multi Select (복수 선택), Radio Mark는 Single Select (단일 선택)을 의미합니다.

Single Select을 사용할 경우 List Item이 반드시 2개 이상 포함되어 있어야 올바르게 Select를 구성할 수 있습니다.

Don’t

Single Select(Radio)는 반드시 2개 이상 항목으로 구성되어야 합니다. Single, Multi Select를 하나의 그룹에서 혼합해서 사용하지 마세요.

Specification & Platform Status

List Item

base

List Header

base

variant=mediumWeak

variant=boldSolid