The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

Lists come in three main variations. single-line (default), two-line and three-line. The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

You cannot interact with disabled v-list.

Shaped lists have rounded borders on one side of the v-list-item.

v-list can be lowered with dense property.

Items don't change when selected in v-list with flat property.

You can make v-list items rounded.

Lists also contain slots for a more explicit approach. If you choose this approach, remember you must provide additional props for correct spacing. In this example, we have a title with an avatar, so we must provide an avatar property.

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

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.

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

Using the v-list-group component you can create up to 2 levels in depth using the sub-group prop.

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

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

리스트는 액션안에 스택(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-item or as a property in the items array.

A three-line list with actions. Utilizing v-list-item-group, easily connect actions to your tiles.

A list can contain a group of items which will display on click. Expansion lists are also used within the v-navigation-drawer component.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!