상점

기업

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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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.

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

리스트는 서브헤더, 구분자 그리고 하나의 또는 여러 라인을 포함할 수 있습니다. 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.

Ready for more? Continue reading with:

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