# Lists

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

# 使い方

リストには主に3つのバリエーションがあります。 single-line (デフォルト), two-line, three-line です。 このリスト宣言はアイテムの最小の高さを指定しており、v-listの同じ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

# 展開リスト

リストは、v-list-groupactivatorスロットを使って、クリックすると表示されるアイテムグループを含めることができます。 展開リストは**v-navigation-drawer**コンポーネントでも使われています。

# その他

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

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

# アクションスタック

リストでは、アクションの中に色々なものを含めることができます。 これはアクションアイテムの横にメタテキストを表示する必要があるときに便利です。

# カードリスト

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

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

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

# 単一行リスト

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

# サブヘッダと区切り線

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

準備はできましたか?

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