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

使い方ブロック

HowToUseコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなステップバイステップガイドコンポーネントです。プロセスフロー、使用方法の説明、コールトゥアクションセクションを表示するための完全なインターフェースを、モダンなデザインパターンと柔軟なカスタマイズオプションとともに提供します。一貫したスタイリングのためにMUIコンポーネント上に構築されています。

🚀 インストール​

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

📖 使用法​

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
ライブエディター
function SimpleHowToUse() {
  return (
    <HowToUse
      subtitle="仕組み"
      headerContent="ステップ"
      message="わずか1分で始められます！"
      linkHref="#sign-up"
      linkContent="無料サインアップ"
    >
      <HowToUse.Header subtitle="仕組み">
        <span>はじめにガイド</span>
      </HowToUse.Header>
      <HowToUse.CardList>
        <HowToUse.Card icon={undefined} headerContent="プロファイル作成">
          サインアップして、スキルと経験を含むプロフェッショナルなプロファイルを作成します。
        </HowToUse.Card>
        <HowToUse.Card icon={undefined} headerContent="プロジェクト検索">
          利用可能なプロジェクトを検索し、興味のあるものを見つけます。
        </HowToUse.Card>
        <HowToUse.Card icon={undefined} headerContent="つながりを作る">
          プロジェクトに応募し、潜在的な雇用主とつながります。
        </HowToUse.Card>
      </HowToUse.CardList>
      <HowToUse.Footer message="わずか1分で始められます！" linkHref="#sign-up" linkContent="無料サインアップ" />
    </HowToUse>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
subtitleReactNode必須ヘッダーに表示されるサブタイトルテキスト（大きいテキスト）
headerContentReactNode必須メインヘッダーテキストコンテンツ（サブタイトルの上の小さいテキスト）
messageReactNode必須フッターボタンの上に表示されるメッセージテキスト
linkHrefstring必須コールトゥアクションボタンのURL
linkContentReactNode必須コールトゥアクションボタンのテキストコンテンツ
spacingResponsiveValue{ xs: 5, lg: 6 }子要素間のスペーシング
classNamestringundefinedコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ backgroundColor: 'background.default', py: { xs: 5, lg: 10 }, px: { xs: 2, lg: 'unset' } }カスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefined高度なカスタマイゼーション用のカスタムブロックオーバーライド

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。すべてのコンテキスト値（subtitle、headerContent、message、linkHref、linkContent）はサブコンポーネントに渡されます。

サブコンポーネント​

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

HowToUse.Header​

2つのTypography要素を持つMUI Stackを使用してヘッダーセクションをレンダリングします。

プロパティ型デフォルト説明
subtitleReactNodeコンテキスト値サブタイトルテキスト（大きい、ヘッダーの下に表示）
childrenReactNodeコンテキスト headerContentメインヘッダーテキスト（小さい、サブタイトルの上に表示）
spacingResponsiveValue{ xs: 0.5, lg: 1 }ヘッダーとサブタイトル間のスペーシング
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ textAlign: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。ヘッダーテキストはh4バリアントでprimary.mainカラーを使用し、サブタイトルはh1バリアントを使用します。

HowToUse.CardList​

カード間に矢印インジケーター付きのレスポンシブカードリストをレンダリングします。

プロパティ型デフォルト説明
childrenReactNode必須表示するCardコンポーネントの配列
directionResponsiveValue{ xs: 'column', lg: 'row' }Stack方向
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ alignItems: { xs: 'center', lg: 'stretch' }, justifyContent: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。デスクトップではカード間にArrowRightアイコンを、モバイルではArrowDropDownアイコンを自動的に追加します。

HowToUse.Card​

MUI Cardを使用して個々のステップカードをレンダリングします。

プロパティ型デフォルト説明
iconSvgIconComponent必須プロパティを受け付けるアイコンコンポーネント（@mui/icons-materialからのMUIアイコンまたはカスタムSVGコンポーネント）
headerContentReactNodeコンテキスト値カードのタイトルテキスト
childrenReactNode必須カードの説明コンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ width: '100%', maxWidth: 360 }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Cardコンポーネントプロパティを継承します。component="article"とelevation={0}でレンダリングされます。アイコンは要素ではなくコンポーネントである必要があります - @mui/icons-materialからのものまたはプロパティを受け付けるカスタムSVGコンポーネント。

HowToUse.Footer​

メッセージとコールトゥアクションボタン付きのフッターセクションをレンダリングします。

プロパティ型デフォルト説明
messageReactNodeコンテキスト値ボタンの上に表示されるメッセージテキスト
linkHrefstringコンテキスト値ボタンのURL
linkContentReactNodeコンテキスト値ボタンのテキストコンテンツ
childrenReactNodeundefined追加コンテンツ
spacingnumber1.5メッセージとボタン間のスペーシング
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ alignItems: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。MUI Buttonをvariant="contained"とsize="large"で使用します。

🎨 設定例​

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

<HowToUse.Header
  subtitle="はじめに"
  sx={{
    textAlign: 'left',
    '& .MuiTypography-h4': {
      color: 'secondary.main',
      fontSize: 16,
    },
    '& .MuiTypography-h1': {
      fontSize: 32,
      fontWeight: 700,
    },
  }}
>
  <span>仕組み</span>
</HowToUse.Header>

カスタムカードスタイリング​

<HowToUse.Card
  icon={undefined}
  headerContent="登録"
  sx={{
    maxWidth: 400,
    bgcolor: 'grey.50',
    borderRadius: 3,
    border: '1px solid',
    borderColor: 'grey.200',
  }}
>
  アカウントを作成
</HowToUse.Card>

カスタムフッターボタンスタイリング​

<HowToUse.Footer 
  sx={{ 
    '& .MuiButton-root': {
      bgcolor: 'success.main',
      borderRadius: 8,
      px: 6,
      py: 2,
      '&:hover': {
        bgcolor: 'success.dark',
      },
    },
  }}
/>

🔧 TypeScriptサポート​

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

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
import {StackProps, CardProps} from '@mui/material';
import {SvgIconComponent} from '@mui/icons-material';
import {ReactNode} from 'react';

// メインコンポーネントプロパティはMUI StackPropsを拡張
interface HowToUseProps extends Omit<StackProps, 'children'> {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
  children?: BlocksOverride;
}

// コンテキストタイプ（すべてのサブコンポーネントに渡される値）
interface HowToUseContextValue {
  subtitle: ReactNode;
  headerContent: ReactNode;
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
}

// カードプロパティ - iconはSvgIconComponentであることに注意
interface CardProps extends MuiCardProps {
  icon: SvgIconComponent;
  headerContent: ReactNode;
  children: ReactNode;
}

// 型付きプロパティの例
function CustomStyledHowToUse() {
  return (
    <HowToUse
      subtitle="はじめに"
      headerContent="仕組み"
      message="始める準備はできましたか？"
      linkHref="#signup"
      linkContent="始める"
      sx={{py: 8}}
    >
      <HowToUse.Header
        subtitle="はじめに"
        sx={{
          textAlign: 'left',
          '& .MuiTypography-h4': {
            color: 'secondary.main',
            fontSize: 16,
          },
          '& .MuiTypography-h1': {
            fontSize: 32,
            fontWeight: 700,
          },
        }}
      >
        <span>仕組み</span>
      </HowToUse.Header>
      <HowToUse.CardList>
        <HowToUse.Card
          icon={undefined}
          headerContent="登録"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          アカウントを作成
        </HowToUse.Card>
        <HowToUse.Card
          icon={undefined}
          headerContent="探索"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          機会を見つける
        </HowToUse.Card>
        <HowToUse.Card
          icon={undefined}
          headerContent="つながる"
          sx={{
            maxWidth: 400,
            bgcolor: 'grey.50',
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'grey.200',
          }}
        >
          関係を構築
        </HowToUse.Card>
      </HowToUse.CardList>
      <HowToUse.Footer
        message="始める準備はできましたか？"
        linkHref="#signup"
        linkContent="始める"
        sx={{
          '& .MuiButton-root': {
            bgcolor: 'success.main',
            borderRadius: 8,
            px: 6,
            py: 2,
            '&:hover': {
              bgcolor: 'success.dark',
            },
          },
        }}
      />
    </HowToUse>
  );
}

📝 注意事項​

  • コンポーネントはルートコンテナとしてMUIのStackをレスポンシブパディングで使用します
  • デフォルトの背景色はtheme.palette.background.defaultです
  • HowToUse.Headerは2つのTypography要素を表示します：ヘッダーテキスト（h4）とサブタイトル（h1）
  • HowToUse.CardListはカード間に矢印アイコンを自動的に追加します（デスクトップではArrowRight、モバイルではArrowDropDown）
  • HowToUse.CardはMUI Cardをelevation={0}とcomponent="article"で使用します
  • HowToUse.CardのアイコンはSvgIconComponentである必要があり、ReactNode要素ではありません
  • HowToUse.FooterはMUI Buttonをvariant="contained"とsize="large"で使用します
  • すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
  • ブロックオーバーライドパターンにより、カスタムブロックの挿入と並べ替えが可能です

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