# Lists
v-list
コンポーネントは情報を表示するために使用されます。 アバター、コンテンツ、アクション、サブヘッダーなどを含めることができます。 リストは、コレクション内の特定のアイテムを簡単に識別できるようにコンテンツを表示します。 テキストや画像のグループを整理するための一貫したスタイルを提供します。
# 使い方
リストには主に3つのバリエーションがあります。 single-line (デフォルト), two-line, three-line です。 このリスト宣言はアイテムの最小の高さを指定しており、v-list
の同じpropから制御することもできます。
# API
# 注意事項
ステートフルリストアイテムを探している場合は、v-list-item-group を確認してください。
# サンプル
# Props
# Dense
v-list
は dense プロパティで高さを下げることができます。
# Disabled
無効にされた v-list
を操作することはできません。
# Flat
v-list
で flat プロパティを持つアイテムは変更されません。
# 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-group
のactivator
スロットを使って、クリックすると表示されるアイテムグループを含めることができます。 展開リストは**v-navigation-drawer**コンポーネントでも使われています。
# その他
# アクションとアイテムグループ
アクション付きの 3行 リスト。 **v-list-item-group**を利用して、簡単にタイルにアクションを接続できます。
# アクションスタック
リストでは、アクションの中に色々なものを含めることができます。 これはアクションアイテムの横にメタテキストを表示する必要があるときに便利です。
# カードリスト
リストはカードと組み合わせることができます。
# シンプルなアバターリスト
v-list-item-icon
, v-list-item-title
と v-list-item-avatar
を利用したシンプルなリスト
# 単一行リスト
ここでは、 v-list-item-avatar と v-list-item-icon を単一行のリストに組み合わせます。
# サブヘッダと区切り線
リストには、複数のサブヘッダーと区切り線を含めることができます。