v-list コンポーネントは情報を表示するために使用されます。リストにはアバター、コンテンツ、アクション、サブヘッダーなどを含めることができます。 リストは、テキストと画像のグループを整理するための一貫したスタイリングを提供し、コレクション内の特定のアイテムを簡単に識別できるようにコンテンツを表示します。
ステートフルリストアイテムを探している場合は、v-list-item-group を確認してください。
リストには主に single-line (デフォルト)、 two-line 、 three-line の3つのバリエーションがあります。行宣言はアイテムの最小の高さを指定し、 v-list の同じプロップから制御することもできます。
以下に、簡単な例から複雑な例まで示します。
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-listでflatプロパティを選択してもアイテムは変化しません。
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.
Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.
3行リストの場合、サブタイトルは2行で垂直方向にクランプされ、次に省略記号が表示されます。この機能はline-clamp を使用しており、すべてのブラウザーでサポートされているわけではありません。
ここでは、 v-list-item-avatar と v-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 コンポーネント内でも使用されます。