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

商品グリッドリストブロック

ListProductsGridコンポーネントは、ReactとTypeScriptで構築された商品表示用の完全にカスタマイズ可能でアクセシブルなグリッドレイアウトです。モダンなデザインパターン、柔軟なカスタマイズオプション、タイトル、アイテム、カード用の構成可能なサブコンポーネントを備えた完全な商品リスティングインターフェースを提供します。

🚀 インストール​

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

📖 使用方法​

import {ListProductsGrid} from '@nodeblocks/frontend-list-products-grid-block';
function ProductsGridExample() {
    const data: ComponentProps<typeof ListProductsGrid.Items.GridCard>[] = [
        {
            chips: [{ label: '新着' }],
            tags: [{ icon: 'shopping_bag', label: 'カテゴリ 1' }],
            subtitleImageUrl: '',
            summary: 'これは何かの要約です',
            imageUrl: 'https://unsplash.it/640?random&x=' + Math.random(),
            subtitle: '商品カードサブタイトル 1',
            title: '商品カードタイトル 1',
            linkProps: { 
                href: '/products/1', 
                onNavigate: () => console.log('商品1にナビゲート中') 
            }
        },
        {
            chips: [{ label: '新着' }],
            tags: [{ icon: 'shopping_bag', label: 'カテゴリ 1' }],
            linkProps: { href: '/my/product/card2', onNavigate: () => {} },
            imageUrl: 'https://unsplash.it/640?random&x=' + Math.random(),
            subtitle: '商品カードサブタイトル 2',
            title: '商品カードタイトル 2',
        },
        {
            chips: [{ label: '新着' }],
            tags: [{ icon: 'shopping_bag', label: ['カテゴリ 1', 'カテゴリ 2'] }],
            linkProps: { href: '/my/product/card3', onNavigate: () => {} },
            imageUrl: 'https://unsplash.it/640?random&x=' + Math.random(),
            subtitle: '商品カードサブタイトル 3',
            title: '商品カードタイトル 3',
        },
    ];

    return (
        <ListProductsGrid
            listProductsGridTitle="私たちの商品"
            subtitle="注目アイテム"
            className="custom-grid">
            <ListProductsGrid.Title />
            <ListProductsGrid.Items>
                {data.map((props, i) => (
                    <ListProductsGrid.Items.GridCard key={i} {...props} />
                ))}
            </ListProductsGrid.Items>
        </ListProductsGrid>
    );
}

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

メイン ListProductsGrid コンポーネントは、HTML div 要素のすべてのプロパティを継承し（children は除く、これはオーバーライドされる）、以下を追加します：

プロパティ型デフォルト説明
listProductsGridTitleReactNodeundefined商品リストのメインタイトル
subtitlestringundefinedメインタイトルの上に表示されるセカンダリタイトル
classNamestringundefinedグリッドコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント​

ListProductsGridコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ListProductsGrid.Title​

プロパティ型デフォルト説明
listProductsGridTitleReactNodeコンテキストからメインタイトルとして表示するコンテンツ
subtitlestringコンテキストからサブタイトルとして表示するコンテンツ
directionenum"column"アクションボタンのフレックス方向
alignItemsenum"stretch"コンテナ内のアイテムの整列
gapSizeenum"S"コンテナ内のアイテム間のギャップ
childrenReactNodeデフォルトタイトルレイアウトデフォルトタイトルレイアウトをオーバーライドするカスタムコンテンツ
classNamestringundefinedタイトルコンテナスタイリング用の追加CSSクラス名

ListProductsGrid.Items​

プロパティ型デフォルト説明
directionenum"column"アクションボタンのフレックス方向
alignItemsenum"stretch"コンテナ内のアイテムの整列
gapSizeenum"S"コンテナ内のアイテム間のギャップ
childrenReactNodeデフォルトタイトルレイアウトデフォルトアイテムカードレイアウトをオーバーライドするカスタムコンテンツ
classNamestringundefinedアイテムコンテナスタイリング用の追加CSSクラス名

ListProductsGrid.Items.GridCard​

プロパティ型デフォルト説明
titlestringundefinedカードに表示されるメインタイトル
subtitlestringundefinedタイトル下に表示されるセカンダリテキスト
summarystringundefined簡潔な説明や要約テキスト
imageUrlstringundefinedカードに表示されるメイン画像のURL
subtitleImageUrlstringundefinedサブタイトル横に表示される小さな画像のURL
chipsArray<{label: string}>undefinedバッジとして表示するチップオブジェクトの配列
tagsArray<{icon: enum, label: string | string[]}>undefinedアイコンとラベルを持つタグオブジェクトの配列
linkProps{href: string, onNavigate: () => void}undefinedカードをクリック可能にするナビゲーションプロパティ
classNamestringundefinedカードスタイリング用の追加CSSクラス名
childrenReactNodeundefinedカード内に表示するカスタムコンテンツ（デフォルトレイアウトをオーバーライド）

🔧 TypeScript サポート​

包括的な型定義による完全なTypeScriptサポート:

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

// デフォルトグリッドカードデータ構造
interface DefaultGridCardData {
  title?: string;
  subtitle?: string;
  summary?: string;
  imageUrl?: string;
  subtitleImageUrl?: string;
  chips?: Array<{label: string}>;
  tags?: Array<{icon: string, label: string | string[]}>;
  linkProps?: {href: string, onNavigate: () => void};
}

// カスタムフィールドで拡張
interface CustomGridCardData extends DefaultGridCardData {
  category?: string;
  price?: number;
  rating?: number;
  customField?: string;
}

const MyProductsGrid = () => {
  const products: ComponentProps<typeof ListProductsGrid.Items.GridCard>[] = [
    {
      title: '商品 1',
      subtitle: 'プレミアム品質',
      summary: 'これは商品1の詳細説明です',
      imageUrl: 'https://example.com/product1.jpg',
      chips: [{ label: '新着' }, { label: '注目' }],
      tags: [
        { icon: 'shopping_bag', label: '電子機器' },
        { icon: 'star', label: ['ベストセラー', '高評価'] }
      ],
      linkProps: { 
        href: '/products/1', 
        onNavigate: () => console.log('商品1にナビゲート中') 
      }
    },
    // ... その他の商品
  ];

  return (
    <ListProductsGrid
      listProductsGridTitle="私たちの商品"
      subtitle="注目コレクション"
      className="custom-grid">
      <ListProductsGrid.Title />
      <ListProductsGrid.Items>
        {products.map((props, index) => (
          <ListProductsGrid.Items.GridCard key={index} {...props} />
        ))}
      </ListProductsGrid.Items>
    </ListProductsGrid>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。