メインコンテンツまでスキップ

ListProductsGridブロック

ListProductsGrid は、MUI の Stack と Card アイテム上に構築されたレスポンシブなカードグリッドおよびリスト表示で、横スクロール可能なチップフィルター、行数制限（line clamping）、完全な複合レイアウトのカスタマイズをサポートします。

インストール​

npm install @nodeblocks/frontend-list-products-grid-block

必要なもの​

項目用途
items (任意)ListProductsGrid.Items.GridCard 用の商品カード設定の配列
layout (任意)プリセットレイアウト: レスポンシブな複数列グリッド（'grid'）または単一列リスト（'list'）
listProductsGridTitle (任意)メインのスーパータイトルテキストまたはカスタム React ノード
subtitle (任意)メインタイトルの上に表示されるセカンダリタイトル
制御コンポーネント

ListProductsGrid はプレゼンテーション用のリストブロックとして動作します。items でカードデータを渡すか、children 要素を渡してカスタムカタログアイテムをレンダリングします（複合コンポーネントを参照）。

コード例​

ライブエディター
function Example() {
  const products = [
    {
      title: '手作りオーク製コンソール',
      subtitle: 'プレミアム職人コレクション',
      summary: 'ケーブル管理とソフトクローズ引き出し付きの手作り無垢材オーク製メディアコンソール。',
      imageUrl: 'https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=640&q=80',
      chips: [{ label: '新着', color: 'warning' }],
      tags: [{ label: '在庫あり' }],
    },
    {
      title: 'エルゴノミックデスクチェア',
      subtitle: 'オフィス快適コレクション',
      summary: '調整可能なランバーサポート、3D アームレスト、通気性メッシュバック付きのタスクチェア。',
      imageUrl: 'https://images.unsplash.com/photo-1505797149-43b0069ec26b?auto=format&fit=crop&w=640&q=80',
      chips: [{ label: 'セール', color: 'primary' }],
      tags: [{ label: '送料無料' }],
    }
  ];

  return (
    <div style={{ minHeight: 400 }}>
      <ListProductsGrid
        listProductsGridTitle="注目商品"
        subtitle="最新コレクション"
        items={products}
        layout="grid"
      />
    </div>
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
itemsComponentProps<typeof ListProductsGrid.Items.GridCard>[]いいえundefinedデフォルト Items レイアウトでレンダリングされる商品カード設定の配列（任意）
layout'grid' | 'list'いいえ'grid'リストアイテムのレイアウトプリセット（grid: 3列レスポンシブ行; list: 縦方向の単一列）

コンテンツプロパティ​

プロパティ型必須デフォルト説明
listProductsGridTitleReactNodeいいえundefinedTitle ブロックに表示されるメインのスーパータイトルテキストまたはカスタム React 要素
subtitlestringいいえundefinedメインタイトルの上に表示されるセカンダリカテゴリラベル

GridCard プロパティ​

items 内の商品カード、または <ListProductsGrid.Items.GridCard /> サブコンポーネントに直接プロパティを設定します:

プロパティ型必須デフォルト説明
titlestringはい-商品カードのプライマリタイトル
subtitlestringいいえundefinedタイトル下に表示されるセカンダリテキストまたはメタカテゴリ
summaryReactNodeいいえundefinedカードのメイン説明; xs では3行、sm 以上では2行に省略表示
imageUrlstringいいえundefinedカード上部中央に表示されるメイン画像 URL
subtitleImageUrlstringいいえundefinedサブタイトルテキスト横に表示される小さなアイコンまたはアバター URL
chips(ChipProps & { label: string })[]いいえundefined横スクロール可能なコンテナ内にマッピングされるステータスタグとバッジ
tags{ icon?: ReactElement; label: string | string[] }[]いいえundefinedカード区切り線の下に表示されるアイコンタグ（label が配列の場合は / で結合）
linkProps{ href?: string; onClick?: (e: React.MouseEvent) => void; onNavigate: ((href: string) => void) | 'standard-html-link'; openInNewTab?: boolean }いいえundefinedカードナビゲーションのクリック設定
disabledbooleanいいえfalsetrue のとき、操作を無効化しカードの不透明度を下げる
directionStackProps['direction']いいえgrid レイアウトでは column、list レイアウトではレスポンシブ column/rowフレックス整列レイアウト（レイアウトベースのデフォルトを上書き）
actionAreaReactNodeいいえundefinedタイトル行の末尾に配置する任意のノード（お気に入りやオプションアイコンボタンなど）
cardContentPropsPartial<Omit<CardContentProps, 'children'>>いいえundefined内部 MUI CardContent コンポーネントに直接渡される上書き
mainStackPropsPartial<StackProps>いいえundefinedカードレイアウトスタック用のカスタムスタイル上書き
colInnerPropsPartial<StackProps>いいえundefined内部列レイアウトスタック用のカスタム上書き
titleStackPropsPartial<StackProps>いいえundefinedタイトル/サブタイトルテキストコンテナに渡される上書き

レイアウトと構成プロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefined複合 JSX の子、または blocks と blockOrder を返す関数オーバーライド
spacingStackProps['spacing']いいえ5タイトルとカタログアイテム間のレイアウト間隔（テーマ単位）
classNamestringいいえundefinedルートコンテナに適用されるカスタムクラス名
sxSxPropsいいえundefinedルート Stack コンテナ用の MUI システムスタイル

ListProductsGrid は StackProps（children を除く）を継承します。オーバーライドなしのデフォルトブロック順は ['title', 'items']（defaultBlockOrder）です。

デフォルト UI ブロック​

ブロックベース備考
ListProductsGrid (ルート)Stack制御されたフレックスラッパー（direction="column"、spacing={5}）
ListProductsGrid.TitleStack + Typographyサブタイトルのスーパーヘッダー（variant h4）とタイトルヘッダー（variant h1）をレンダリング
ListProductsGrid.ItemsBoxCSS Grid コンテナ。layout プロパティに応じて列を展開: 'grid'（3列）または 'list'（1列）
ListProductsGrid.Items.GridCardCardメインの商品レイアウトカード; CardMedia、HorizontalScrollEdgeArrows、メタデータ列をネスト

TypeScript​

import { ListProductsGrid } from '@nodeblocks/frontend-list-products-grid-block';
import type { ComponentProps } from 'react';

type GridCardConfig = ComponentProps<typeof ListProductsGrid.Items.GridCard>;

const products: GridCardConfig[] = [
  {
    title: '無垢材オーク製コンソールテーブル',
    subtitle: '限定職人リリース',
    summary: 'プレミアムホワイトオークから手作りされた美しいコンソール。',
    imageUrl: 'https://example.com/oak-table.jpg',
    chips: [{ label: '新着', color: 'warning' }],
    linkProps: {
      href: '/products/oak-table',
      onNavigate: 'standard-html-link',
    }
  }
];

<ListProductsGrid
  listProductsGridTitle="ショールーム"
  subtitle="手作り家具"
  items={products}
  layout="grid"
/>;