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

Meritsブロック

Merits は、MUI 上に構築されたマーケティング用メリットセクションで、中央揃えのヘッダー、メリットタイルの行、プライマリのコールトゥアクションリンクボタンを備えています。

インストール​

npm install @nodeblocks/frontend-merits-block@0.3.2

必要なもの​

項目用途
subtitle補助テキスト行
meritsTitleメイン見出し
itemsメリットタイルのコンテンツ
buttonTextCTA のラベル
buttonHrefデフォルト contained ボタンの href
コンテンツはアプリ側で管理する

ヘッダーのコピー、メリット項目、CTA テキストをページまたは CMS から渡してください。各項目には imageUrl、text、subtext が必要です。画像は小画面・大画面とも固定アスペクト比フレーム内で object-fit: contain になります。

コード例​

ライブエディター
function Example() {
  const items = [
    {
      imageUrl: '/img/undraw_docusaurus_mountain.svg',
      text: '迅速な配送',
      subtext: '注文を迅速かつ効率的にお届けします',
    },
    {
      imageUrl: '/img/undraw_docusaurus_react.svg',
      text: '品質保証',
      subtext: 'すべての製品で最高品質をお約束します',
    },
    {
      imageUrl: '/img/undraw_docusaurus_tree.svg',
      text: '24時間サポート',
      subtext: 'いつでもお客様をサポートします',
    },
  ];

  return (
    <Merits
      subtitle="選ばれる理由"
      meritsTitle="主なメリット"
      buttonText="詳しく見る"
      buttonHref="#about"
      items={items}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
subtitleReactNodeはい—補助ヘッダー行（Merits.Header、プライマリカラー）
meritsTitleReactNodeはい—Merits.Header のメイン見出し
items{ imageUrl: string; text: ReactNode; subtext: ReactNode }[]はい—Merits.Content でマッピングされるメリットタイル
buttonTextstringはい—Merits.ActionBar のデフォルト CTA ボタンのラベル
buttonHrefstringはい—デフォルトの Merits.ActionBar.Button に渡される href

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

プロパティ型必須デフォルト説明
childrenReactNode | functionいいえundefined複合サブコンポーネント（Merits.Header、Merits.Content、Merits.ActionBar）、またはレイアウトブロックの注入・並べ替え用の関数 ({ defaultBlocks, defaultBlockOrder }) => ({ blocks, blockOrder })
classNamestringいいえundefinedルートスタックのクラス名（nbb-merits）
sxSxPropsいいえundefinedルートスタック用の MUI システムスタイル
spacingStackProps['spacing']いいえ{ xs: 4, sm: 6 }ルートスタックの垂直方向の間隔

Merits は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: header、content、actionBar。

サブコンポーネントのプロパティ​

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして渡すとローカルで上書きできます。

サブコンポーネント主要プロパティ継承ベース
Merits.Headerchildren、className、sxStackPropsStack + Typography
Merits.Contentitems、children、className、sxStackPropsStack + Merits.Content.MeritImage + Merits.Content.MeritText
Merits.Content.MeritImagemeritSrc、meritAlt（デフォルト merit image）、className、sxBoxPropsBox（component="img"）
Merits.Content.MeritTextchildren、className、sxTypographyPropsTypography
Merits.ActionBarbuttonText、buttonHref、children、className、sxStackPropsStack + Merits.ActionBar.Button
Merits.ActionBar.Buttonchildren、href、className、sxButtonPropsButton（variant="contained"、size="large"）

デフォルト UI ブロック​

ブロックベース備考
Merits（ルート）Stack縦レイアウト、レスポンシブな間隔（nbb-merits）
header（Merits.Header）Stack + Typography中央揃えの subtitle（レスポンシブ h6/h4）とタイトル（レスポンシブで最大 45px）
content（Merits.Content）Stack + Dividersm+ では横並び。各項目: 画像フレーム、text（MeritText）、subtext（MeritSubtext、body1）
actionBar（Merits.ActionBar）Stack + ButtonbuttonHref と buttonText 付き contained CTA。xs では全幅

デフォルトのルートレンダリング順序: header → content → actionBar。

TypeScript​

import * as React from 'react';
import { Merits } from '@nodeblocks/frontend-merits-block';
import type { ReactNode } from 'react';

type MeritItem = {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
};

type MeritsSectionProps = {
  subtitle: ReactNode;
  meritsTitle: ReactNode;
  buttonText: string;
  buttonHref: string;
  items: MeritItem[];
};

export function MeritsSection({
  subtitle,
  meritsTitle,
  buttonText,
  buttonHref,
  items,
}: MeritsSectionProps) {
  return (
    <Merits
      subtitle={subtitle}
      meritsTitle={meritsTitle}
      buttonText={buttonText}
      buttonHref={buttonHref}
      items={items}
    />
  );
}