Grid List

グリッドリストは、整理されたグリッドで画像のコレクションを表示します。

グリッドリスト は、繰り返しパターンの項目の集まりを表します。 それらは、保持するコンテンツの視覚的理解を改善するのに役立ちます。

画像のみのGrid list

スクロール可能な画像の簡単な ImageListの例。

タイトルバー付きのGrid list

この例は、 ImageListItemBar を使用して、各 ImageListItemオーバーレイを追加する方法を示しています。 オーバーレイには、 title, subtitle および副次的アクション例えばIconButtonを含めることができます。

Single line Grid list 単一行グリッドリスト

この例では、水平スクロール可能な単一行グリッドの画像リストを示します。 水平方向のスクロールグリッドリストは、スクロールが一般的な読み方の邪魔になり理解に影響を与えるため、推奨されません。 注目すべき例外の1つは、水平にスクロールする、ギャラリーなどの画像の1行グリッドリストです。

高度なグリッドリスト

この例では、rows and cols プロップを使用してタイルのサイズを調整し、 paddingプロップを使用して間隔を調整する方法を示します。 タイルには、上部にカスタムのタイトルバーがあり、カスタムのグラデーションtitleBackgroundがあります。 セカンダリアクション IconButton は左側に配置されます。

<<<<<<< HEAD:docs/src/pages/components/grid-list/grid-list-ja.md

=======

[GridList] Rename to ImageList & add deprecation warnings (#22363):docs/src/pages/components/image-list/image-list-ja.md

API

• <ImageList />
• <ImageListItem />
• <ImageListItemBar />