목록 -Design System 구성 요소

목록 구성 요소를 사용하면 사용자가 텍스트, 아이콘, 이미지는 물론 버튼, 아바타와 같은 구성 요소를 포함하는 템플릿 가능한 항목의 연속적인 수직 컬렉션을 찾아보고 상호 작용할 수 있습니다. 목록은 Ignite UI for Angular와 시각적으로 동일합니다.

List Demo

Type

목록은 한 줄 항목 목록 또는 두 줄 항목 목록이 있는 사전 설정에 삽입될 수 있으며 둘 다 처음에는 10개의 항목을 포함합니다.

Using the List in Figma

목록은 텍스트와 아이콘으로 표시되는 기본 데이터와 보조 작업이 포함된 정보를 표시하는 연속적인 행 그룹입니다. Figma 에서는 자동 레이아웃을 사용하여 목록을 생성하고 콘텐츠에 따라 레이아웃과 간격을 자동으로 조정합니다. 목록에 더 적은 수의 항목이 필요한 경우 불필요한 항목을 수동으로 숨겨야 합니다. 더 많은 항목이 포함된 목록을 디자인하려면 상황에 맞는 메뉴에서 Detach Instance 선택한 다음 기존 항목을 복제하여 목록 항목을 늘려 목록 구성 요소를 분리해야 합니다. 항상 일관된 수평 너비와 정렬을 사용하여 목록 항목을 상대 헤더 아래에 배치하고 항목 사이에 간격이 없는지 확인하십시오.

층	사용
🚫 컴포넌트 버전	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
목록 헤더	목록 헤더 항목의 인스턴스
1개 항목	한 줄/두 줄 목록 항목의 인스턴스
2 품목	한 줄/두 줄 목록 항목의 인스턴스
3 항목	한 줄/두 줄 목록 항목의 인스턴스
4 항목	한 줄/두 줄 목록 항목의 인스턴스
5개 항목	한 줄/두 줄 목록 항목의 인스턴스
6 항목	한 줄/두 줄 목록 항목의 인스턴스
7 항목	한 줄/두 줄 목록 항목의 인스턴스
8 항목	한 줄/두 줄 목록 항목의 인스턴스
9 항목	한 줄/두 줄 목록 항목의 인스턴스
10 품목	한 줄/두 줄 목록 항목의 인스턴스

Using the List in Sketch

목록은 본질적으로 데이터를 항목의 색인화된 수직 컬렉션으로 표시하는 행의 반복기입니다. 항목에 대해 하나 이상의 항목을 ~No Symbol로 설정하여 크기를 조정할 수 있는 스마트 레이아웃을 사용합니다. 더 많은 항목이 포함된 목록을 디자인해야 하는 경우 가장 쉬운 방법은 아트보드에 목록 유형을 삽입하고 목록 상단을 마우스 오른쪽 버튼으로 클릭한 다음 상황에 맞는 메뉴 하단에 있는 Detach from Symbol 선택하는 것입니다. . 새로 나타난 목록/한 줄 항목 목록 또는 목록/두 줄 항목 목록 그룹 아래의 레이어 패널에서 Figma와 거의 동일한 레이어 구조를 볼 수 있습니다(위 표 확인). 두 가지 차이점은 🌈 Background 대한 하단에 추가 레이어가 하나 표시되고 상단에 🚫 componentVersion 레이어가 표시되지 않는다는 것입니다.

이제 분리한 후 메뉴에서 또는 단순히 기존 항목을 복제하여 추가 헤더나 항목을 삽입할 수 있습니다. 항상 일관된 수평 너비와 정렬을 사용하여 항목과 헤더를 차례로 배치하고 항목 사이에 간격이 없는지 확인하십시오.

Using the List in Adobe XD

Adobe XD에서는 아트보드의 목록 구성 요소를 드래그한 후 불필요한 항목을 삭제하여 항목 수를 줄이거나 기존 항목 중 하나를 복제하여 항목 수를 늘릴 수 있습니다. List는 항목을 Stack에 배치하므로 항목을 추가하거나 제거하면 항목이 자동으로 수직으로 정렬되고 배포됩니다. 목록에서 위치를 변경하려면 원하는 위치로 위나 아래로 끌어야 합니다. Sketch와 달리 Adobe XD에서는 기호를 삭제할 필요가 없습니다.

스타일링

목록에는 배경색과 아이콘, 텍스트 등 목록 항목에 사용되는 다양한 요소와 아바타, 배지, 확인란, 아이콘, 진행률, 스위치 등과 같은 구성 요소에 사용할 수 있는 옵션을 통해 스타일 유연성이 제공됩니다. 나만의 스타일링 능력

Usage

목록 및 목록 항목에는 고유한 디자인 특성이 있지만 가장 중요한 것은 목록이 일반적으로 공통 템플릿을 따르는 유사한 항목의 모음이라는 점을 항상 기억해야 한다는 것입니다. 따라서 동일한 목록 내에서 여러 템플릿을 결합하지 마십시오. 또한 요소를 숨기지 말고 대신 특정 유형의 콘텐츠가 누락된 경우 자리표시자나 빈 요소를 제공하세요. 마지막으로, 템플릿을 구성하는 요소의 정렬에 특별한 주의를 기울이십시오. 수직 연속성을 인식할 수 있어야 하기 때문입니다.

하다	하지 않다

목록