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

メリットブロック

Meritsコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなメリット/ベネフィット表示ブロックです。企業のメリット、ベネフィット、または機能を紹介するための完全なインターフェースを、モダンなデザインパターン、柔軟なカスタマイズオプション、レスポンシブレイアウトとともに提供します。

🚀 インストール​

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

📖 使用法​

import {Merits} from '@nodeblocks/frontend-merits-block';
ライブエディター
function SimpleMerits() {
  const meritsData = [
    {
      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: 'あらゆるニーズに対応する24時間体制のカスタマーサポート',
    },
  ];

  return (
    <Merits
      subtitle="なぜ私たちを選ぶのか"
      meritsTitle="私たちの主要なベネフィット"
      buttonText="詳細を見る"
      buttonHref="#about"
      items={meritsData}
      sx={{backgroundColor: 'white', padding: 2}}
    >
      <Merits.Header />
      <Merits.Content />
      <Merits.ActionBar />
    </Merits>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
subtitleReactNode必須メインタイトルの上に表示されるサブタイトルテキスト
meritsTitleReactNode必須メリットセクションのメインタイトル
buttonTextstring必須アクションボタンのテキストコンテンツ
buttonHrefstring必須アクションボタンリンクのURLまたはパス
itemsMeritProps[]必須表示するメリット項目の配列
spacingnumber | ResponsiveValue6子要素間のスペーシング
directionStackDirection'column'子要素のレイアウト方向
classNamestringundefinedコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはすべてのMUI Stackプロパティを継承します。

サブコンポーネント​

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

Merits.Header​

サブタイトルとメインタイトルを含むヘッダーセクションをレンダリングします。

プロパティ型デフォルト説明
childrenReactNodeデフォルトヘッダーコンテンツデフォルトヘッダーレンダリングをオーバーライドするカスタムコンテンツ
spacingnumber | ResponsiveValue1サブタイトルとタイトル間のスペーシング
alignItemsstring'stretch'子要素の配置
sxSxProps<Theme>{ textAlign: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。childrenが提供されない場合、内部でMeritSubtitleとMeritTitleをレンダリングします。

Merits.Content​

メリット項目を行レイアウトでレンダリングします。

プロパティ型デフォルト説明
childrenReactNodeデフォルトメリット項目デフォルトメリット項目レンダリングをオーバーライドするカスタムコンテンツ
itemsMeritProps[]コンテキストから表示するメリット項目の配列（コンテキストのitemsをオーバーライド）
directionStackDirection'row'メリット項目のレイアウト方向
spacingnumber | ResponsiveValue5メリット項目間のスペーシング
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。各メリット項目はMeritImage、MeritText、MeritSubtextを含むMeritItemとしてレンダリングされます。

Merits.Content.MeritImage​

メリット項目の画像をレンダリングします。

プロパティ型デフォルト説明
srcstringundefined画像のURL
altstring'merit image'画像の代替テキスト
componentstring'img'ルートノードに使用されるコンポーネント（固定）
sxSxProps<Theme>{ maxWidth: '100%', height: 225 }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Box<'img'>プロパティを継承します。

Merits.Content.MeritText​

メリット項目のメインテキストをレンダリングします。

プロパティ型デフォルト説明
childrenReactNode項目データからメリットのテキストコンテンツ
variantstring'h4'Typographyバリアント
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  fontWeight: 600,
  textAlign: 'center',
  fontSize: 25,
  lineHeight: 1.5
}

注意: このコンポーネントはすべてのMUI Typographyプロパティを継承します。

MeritSubtext（内部）​

メリット項目のセカンダリテキスト/説明をレンダリングします。

プロパティ型デフォルト説明
childrenReactNode項目データからメリットのサブテキストコンテンツ
variantstring'body1'Typographyバリアント
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  lineHeight: 1.72,
  alignSelf: 'center',
  fontWeight: 300
}

注意: このコンポーネントはすべてのMUI Typographyプロパティを継承します。これはメリット項目をレンダリングする際に使用される内部コンポーネントです。

MeritItem（内部）​

各メリットのコンテナコンポーネント。

プロパティ型デフォルト説明
childrenReactNode必須メリット項目のコンテンツ
spacingnumber | ResponsiveValue2画像、テキスト、サブテキスト間のスペーシング
alignItemsstring'stretch'子要素の配置
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  minWidth: 0,
  flex: 1,
  paddingBottom: 4
}

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。これはメリット項目をレンダリングする際に使用される内部コンポーネントです。

Merits.ActionBar​

コールトゥアクションボタン付きのアクションバーをレンダリングします。

プロパティ型デフォルト説明
childrenReactNodeデフォルトボタンデフォルトアクションバーレンダリングをオーバーライドするカスタムコンテンツ
buttonHrefstringコンテキストからボタンのURL（コンテキストのbuttonHrefをオーバーライド）
buttonTextstringコンテキストからボタンのテキスト（コンテキストのbuttonTextをオーバーライド）
spacingnumber | ResponsiveValue1子要素間のスペーシング
alignItemsstring'stretch'子要素の配置
sxSxProps<Theme>{ textAlign: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。デフォルトでMerits.ActionBar.Buttonコンポーネントをレンダリングします。

Merits.ActionBar.Button​

コールトゥアクションボタンをレンダリングします。

プロパティ型デフォルト説明
childrenReactNodeコンテキストからボタン内に表示するテキスト
hrefstringコンテキストからボタンリンクのURL
variantstring'contained'ボタンバリアント
sizestring'large'ボタンサイズ
colorstring'primary'ボタンカラー
disabledbooleanfalseボタンが無効かどうか
onClickfunctionundefinedクリックハンドラー関数
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  fontSize: 22,
  alignSelf: 'center',
  fontWeight: 600,
  lineHeight: 1.5
}

注意: このコンポーネントはすべてのMUI Buttonプロパティを継承します。

🎨 設定例​

カスタムヘッダースタイリング​

<Merits.Header sx={{mb: 4, textAlign: 'center'}} />

カスタムコンテンツレイアウト​

<Merits.Content direction={{xs: 'column', md: 'row'}} spacing={4} />

カスタムアクションボタン​

<Merits.ActionBar sx={{mt: 4}}>
  <Merits.ActionBar.Button href="#get-started" sx={{px: 6, py: 2}}>
    🚀 今すぐ始める
  </Merits.ActionBar.Button>
</Merits.ActionBar>

カスタムスタイリング例​

<Merits
  subtitle="なぜ私たちのプラットフォームを選ぶのか"
  meritsTitle="モダンビジネス向けに構築"
  buttonText="無料トライアル開始"
  buttonHref="#signup"
  items={meritsData}
  spacing={8}
  sx={{backgroundColor: '#f8f9fa', padding: 4}}
>
  <Merits.Header sx={{mb: 4}} />
  <Merits.Content direction={{xs: 'column', md: 'row'}} spacing={4} />
  <Merits.ActionBar sx={{mt: 4}}>
    <Merits.ActionBar.Button href="#get-started" sx={{px: 6, py: 2}}>
      🚀 今すぐ始める
    </Merits.ActionBar.Button>
  </Merits.ActionBar>
</Merits>

ブロックオーバーライドパターン​

<Merits {...props}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      header: {
        ...defaultBlocks.header,
        props: {
          ...defaultBlocks.header.props,
          spacing: 2,
          sx: {
            textAlign: 'center',
            mb: 4,
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</Merits>

🔧 TypeScriptサポート​

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

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

interface MeritProps {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
}

function TypedMerits() {
  const meritsData: MeritProps[] = [
    {
      imageUrl: '/icons/analytics.svg',
      text: '強力な分析',
      subtext: 'ビジネスパフォーマンスの詳細なインサイトを取得',
    },
    {
      imageUrl: '/icons/automation.svg',
      text: 'スマート自動化',
      subtext: '繰り返しタスクを自動化し、重要なことに集中',
    },
    {
      imageUrl: '/icons/integration.svg',
      text: 'シームレスな統合',
      subtext: '200以上の人気ツールやサービスと接続',
    },
  ];

  return (
    <Merits
      subtitle="プラットフォームのベネフィット"
      meritsTitle="成功に必要なすべて"
      buttonText="機能を探索"
      buttonHref="#features"
      items={meritsData}
      spacing={6}
      direction="column"
      sx={{
        backgroundColor: 'background.paper',
        borderRadius: 3,
        boxShadow: 2,
        p: 4,
        maxWidth: 1200,
        mx: 'auto',
      }}
    >
      <Merits.Header sx={{textAlign: 'center'}} />
      <Merits.Content />
      <Merits.ActionBar>
        <Merits.ActionBar.Button
          variant="contained"
          href="#pricing"
          sx={{
            fontSize: 22,
            alignSelf: 'center',
            fontWeight: 600,
            lineHeight: 1.5,
          }}
        >
          料金プランを表示
        </Merits.ActionBar.Button>
      </Merits.ActionBar>
    </Merits>
  );
}

📝 注意事項​

  • メインコンポーネントはデフォルトでMUI Stackをdirection="column"とspacing={6}で使用します。
  • すべてのサブコンポーネントはMUIコンポーネントプロパティを継承し、スタイリング用のsxプロパティをサポートします。
  • Headerコンポーネントはchildrenが提供されない限り、内部でMeritSubtitle（Typography h4）とMeritTitle（Typography h1）をレンダリングします。
  • Contentコンポーネントはデフォルトで水平行に項目をレンダリングします。レスポンシブレイアウトにはdirection={{ xs: 'column', md: 'row' }}を使用します。
  • 各メリット項目はspacing={2}とflex: 1を持つMeritItem Stackコンテナでラップされます。
  • ActionBar.Buttonはデフォルトでvariant="contained"とsize="large"を持つMUI Buttonを使用します。
  • コンテキスト値（subtitle、meritsTitle、buttonText、buttonHref、items）はReact Contextを介して共有され、サブコンポーネントレベルでオーバーライドできます。

React、TypeScript、MUIを使用して❤️で構築されました。