ショップ

企業向け

v-list コンポーネントは情報を表示するために使用されます。リストにはアバター、コンテンツ、アクション、サブヘッダーなどを含めることができます。 リストは、テキストと画像のグループを整理するための一貫したスタイリングを提供し、コレクション内の特定のアイテムを簡単に識別できるようにコンテンツを表示します。

リストには主に single-line (デフォルト)、 two-linethree-line の3つのバリエーションがあります。行宣言はアイテムの最小の高さを指定し、 v-list の同じプロップから制御することもできます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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.

v-listflatプロパティを選択してもアイテムは変化しません。

You can make v-list items rounded.

リストには、より明示的なアプローチのためのスロットも含まれています。この方法を選択する場合は、正しい間隔を設定するために追加のpropsを用意する必要があります。この例では、アバターを含むタイルがあるため、 avatarプロパティを提供する必要があります。

Lists can contain subheaders, dividers, and can contain 1 or more lines. 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.

ここでは、 v-list-item-avatarv-list-item-icon を1行のリストにまとめます。

v-list-group コンポーネントを使用すると、sub-group propを使用して最大 2 レベルまで作成できます。

リストには、複数のサブヘッダーと区切り線を含めることができます。

A list can be combined with a card.

A list can contain a stack within an action. This is useful when you need to display meta text next to your action item.

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

リストには、クリックすると表示される項目のグループを含めることができます。展開リストはv-navigation-drawer コンポーネント内でも使用されます。

準備はいいですか? 以下から続きが読めます。

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