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

How To Useブロック

HowToUse は、MUI 上に構築されたマーケティング用ステップセクションで、中央揃えのヘッダー、矢印でつながれたステップカードの行、フッターのコールトゥアクションリンクボタンを備えています。

インストール​

npm install @nodeblocks/frontend-how-to-use-block

必要なもの​

項目用途
subtitle大きな見出し
headerContent見出し上の補助ラベル
cardListステップカードのコンテンツ
messageCTA 上の任意のフッター行
linkHrefフッターの contained ボタンの href
linkContentフッターボタンのラベル
コンテンツはアプリ側で管理する

ヘッダーのコピー、ステップカード、CTA テキストをページまたは CMS から渡してください。各カードには MUI の icon、headerContent、本文（children）が必要です。カードはルートの cardList で渡すか、HowToUse.CardList の子として直接構成できます。

コード例​

ライブエディター
function Example() {
  const cardList = [
    <HowToUse.Card key="apply" icon={EditOutlined} headerContent="申し込み">
      アカウントを作成し、スキルと経験を入力してください。
    </HowToUse.Card>,
    <HowToUse.Card key="account" icon={AccountBoxOutlined} headerContent="プロフィールを設定">
      職歴、ポートフォリオリンク、希望条件を追加してください。
    </HowToUse.Card>,
    <HowToUse.Card key="post" icon={AddToQueue} headerContent="マッチングを開始">
      求人を閲覧し、目標に合うポジションに応募してください。
    </HowToUse.Card>,
  ];

  return (
    <HowToUse
      subtitle="仕組み"
      headerContent="ステップ"
      message="数分で始められます"
      linkHref="#sign-up"
      linkContent="無料アカウントを作成"
      cardList={cardList}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
subtitleReactNodeはい—HowToUse.Header の大きな見出し（h1、レスポンシブで最大 45px）
headerContentReactNodeはい—HowToUse.Header の補助ラベル（primary.main、レスポンシブ h6/h4）
messageReactNodeはい—HowToUse.Footer の CTA 上のフッター行（ falsy のときは非表示）
linkHrefstringはい—フッターの contained ボタンの href
linkContentReactNodeはい—フッターボタンのラベル
cardListReactNode[]いいえundefinedCardList に子がない場合、HowToUse.CardList でレンダリングされるステップカード

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

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

HowToUse は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: header、cardList、card、footer。

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

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

サブコンポーネント主要プロパティ継承ベース
HowToUse.Headersubtitle、headerContent、children、className、sxStackPropsStack + Typography
HowToUse.CardListcardList、children、className、sxStackPropsStack + カード間の ArrowRight / ArrowDropDown
HowToUse.Cardicon、headerContent、children、className、sxCardPropsCard + Typography
HowToUse.Footermessage、linkHref、linkContent、children、className、sxStackPropsStack + Button（variant="contained"、size="large"）

デフォルト UI ブロック​

ブロックベース備考
HowToUse（ルート）Stack縦レイアウト（nbb-how-to-use）
header（HowToUse.Header）Stack + Typography中央揃えの headerContent と subtitle 見出し
cardList（HowToUse.CardList）Stack + 矢印アイコンxs では縦、sm+ では横。小画面ではカード間に ArrowDropDown、大画面では ArrowRight
card（HowToUse.Card）Card + Typographyarticle カード。アイコン、headerContent、本文（nbb-how-to-use-card）
footer（HowToUse.Footer）Stack + Button任意の message 行と linkHref / linkContent 付き contained CTA（nbb-how-to-use-footer）

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

TypeScript​

import * as React from 'react';
import type { SvgIconComponent } from '@mui/icons-material';
import { HowToUse } from '@nodeblocks/frontend-how-to-use-block';
import type { ReactNode } from 'react';

type HowToUseStep = {
  key: string;
  icon: SvgIconComponent;
  headerContent: ReactNode;
  body: ReactNode;
};

type HowToUseSectionProps = {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
  steps: HowToUseStep[];
};

export function HowToUseSection({
  subtitle,
  headerContent,
  message,
  linkHref,
  linkContent,
  steps,
}: HowToUseSectionProps) {
  const cardList = steps.map(({ key, icon, headerContent: title, body }) => (
    <HowToUse.Card key={key} icon={icon} headerContent={title}>
      {body}
    </HowToUse.Card>
  ));

  return (
    <HowToUse
      subtitle={subtitle}
      headerContent={headerContent}
      message={message}
      linkHref={linkHref}
      linkContent={linkContent}
      cardList={cardList}
    />
  );
}