리스트 (List)

v-list 컴포넌트는 정보를 표시하는데 사용됩니다. 이는 아바타, 컨텐츠, 액션, 서브헤더 그리고 많은 것을 포함합니다. 리스트는 자식들을 가질 수 있고 사이드바에서 사용될 수도 있습니다.

사용법

리스트는 리스트 아이템의 배열을 취할 수 있습니다. 배열이 주어지면 리스트 컴포넌트는 이 배열에 기반하여 필요한 클래스를 알아 냅니다. 또한 아이템 배열 안에서 헤더나 구분자(디바이더)를 정의할 수도 있습니다.


API

예제

아바타와 타이틀/액션 (Avatar with title and action)

리스트는 더 명시적인 접근을 위해 슬롯을 가지고 있습니다. 만약 이 접근방식을 택한다면, 정확한 간격(spacing)을 위해 추가적인 props을 반드시 제공해야 한다는 점을 기억하세요. 예를 들어 아바타를 가진 타일(tile)의 경우 반드시 avatar 프로퍼티를 제공해야합니다.


두 줄 아이콘과 액션 (Icon with 2 lines and action)

리스트는 서브헤더, 구분자 그리고 하나의 또는 여러 라인을 포함할 수 있습니다. The subtitle will overflow with ellipsis if it extends past one line.


세 줄 아바타 (Avatar with 3 lines)

세 줄 단위 리스트에서, 서브타이틀은 세로로 두번째 줄에 고정(clamp)되고 나머지는 생략표시(ellipsis) 됩니다. 만약 3줄 이상이 필요하다면 카드(card)를 쓰는 것을 권장합니다.


아바타와 타이틀/액션

리스트 슬롯을 사용할 경우, 반드시 헤더를 포함할지를 혹은 아이템들이 아바타를 포함할 것인지를 정의해야합니다. 이는 적당한 간격 조정을 위해 필요합니다.


서브헤더와 구분자 (Subheadings and dividers)

리스트는 복수의 서브헤더와 구분자를 포함할 수 있습니다.


카드이미지와 툴바/리스트 (Card image with toolbar and list)

리스트를 카드와 결합할 수 있습니다.


타이틀과 서브타이틀/액션/액션-텍스트 (Title with sub-title, actions and action-text)

리스트는 액션안에 스택(stack)을 포함할 수 있습니다. A list can contain a stack within an action. Ripple and router props can be passed through the main v-list, to the v-list-tile or as a property in the items array.


액션과 타이틀/서브타이틀 (Action with title and sub-title)

리스트는 3줄까지 포함할 수 있습니다.


확장 리스트 (Expansion Lists)

리스트는 클릭할때 보여지는 아이템 그룹을 가질 수 있습니다. 확장리스는 또한 네비게이션 서랍(navigation drawer) 컴포넌트 안에서도 사용됩니다.