# Lists

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

# 使い方

リストには主に3つのバリエーションがあります。 single-line (デフォルト), two-line, three-line です。 The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

# API

# 注意事項

# サンプル

# Props

# Dense

v-listdense プロパティで高さを下げることができます。

# Disabled

無効にされた v-listを操作することはできません。

# Flat

v-listflat プロパティを持つアイテムは変更されません。

# Rounded

v-listアイテムの両側を丸めることができます。

# Shaped

Shaped lists では、v-list-item の片側が丸くなります。

# Sub group

v-list-group コンポーネントを利用すると、 sub-group プロパティを利用して、深さ2までのサブグループを作成できます。

# Three line

3行リストを指定すると、サブタイトルは2行で省略表示されます。 この機能は line-clamp を使用しており、すべてのブラウザでサポートされているわけではありません。

# 2つの行とサブヘッダー

リストには、サブヘッダーや水平線、1行以上を含めることができます。 サブタイトルは、1行を超えると省略して表示されます。

# Slots

# 展開リスト

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

# その他

# アクションとアイテムグループ

アクション付きの 3行 リスト。 **v-list-item-group**を利用して、簡単にタイルにアクションを接続できます。

# Action stack

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

# カードリスト

リストはカードと組み合わせることができます。

# シンプルなアバターリスト

v-list-item-icon, v-list-item-titlev-list-item-avatar を利用したシンプルなリスト

# 単一行リスト

ここでは、 v-list-item-avatarv-list-item-icon を単一行のリストに組み合わせます。

# サブヘッダと区切り線

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

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:12/05/2021, 4:26:41 PM