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

使い方ブロック

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

🚀 インストール​

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

📖 使用法​

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

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

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

プロパティ型デフォルト説明
classNamestringundefinedコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefined高度なカスタマイゼーション用のカスタムブロックオーバーライド

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

サブコンポーネント​

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

HowToUse.Header​

プロパティ型デフォルト説明
childrenReactNode"STEP"メインヘッダーテキストコンテンツ
subtitleReactNode"How it works"メインヘッダーの下に表示されるサブタイトルテキスト

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

HowToUse.CardList​

プロパティ型デフォルト説明
childrenReactNodeデフォルトカード配列順番に表示するCardコンポーネントの配列

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

HowToUse.Card​

プロパティ型デフォルト説明
iconReactNode必須カードヘッダーに表示するアイコンまたは要素
headerContentReactNode必須カードのタイトルコンテンツ
childrenReactNode必須カードの説明または本文コンテンツ

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

HowToUse.Footer​

プロパティ型デフォルト説明
messageReactNode"Get started in just 1 minute!"コールトゥアクションボタンの上に表示されるメッセージテキスト
linkHrefstring"/sign-up"コールトゥアクションボタンのURL
linkContentReactNode"Sign Up Free"コールトゥアクションボタンのテキストコンテンツ
childrenReactNodeundefinedフッターに表示する追加コンテンツ

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

🔧 TypeScriptサポート​

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

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
import {ComponentProps, ReactNode} from 'react';

// メインコンポーネントインターフェース
interface HowToUseProps extends Omit<ComponentProps<'div'>, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
}

// サブコンポーネントインターフェース（すべてそれぞれのHTML要素から継承）
interface HeaderProps extends ComponentProps<'div'> {
  subtitle: ReactNode;
}

interface CardProps extends ComponentProps<'div'> {
  icon: ReactNode;
  headerContent: ReactNode;
}

interface FooterProps extends ComponentProps<'div'> {
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
}

// カスタムステップインターフェースの例
interface CustomStep {
  icon: React.ReactNode;
  title: string;
  description: string;
}

const steps: CustomStep[] = [
  {
    icon: <span>📝</span>,
    title: '登録',
    description: 'アカウントとプロファイルを作成',
  },
  {
    icon: <span>🔍</span>,
    title: '検索',
    description: 'スキルに合致するプロジェクトを見つける',
  },
  {
    icon: <span>💼</span>,
    title: '応募',
    description: '興味深いプロジェクトに応募する',
  },
];

// カスタムスタイリングとプロパティ付きの高度な例
function CustomHowToUse() {
  return (
    <HowToUse className="custom-how-to-use" id="getting-started-section" style={{padding: '2rem'}}>
      <HowToUse.Header subtitle="はじめに" className="custom-header" style={{textAlign: 'center'}}>
        仕組み
      </HowToUse.Header>

      <HowToUse.CardList className="custom-card-list" style={{maxWidth: '1200px', margin: '0 auto'}}>
        {steps.map((step, index) => (
          <HowToUse.Card
            key={index}
            icon={step.icon}
            headerContent={step.title}
            className="custom-step-card"
            style={{backgroundColor: '#f8f9fa'}}
          >
            {step.description}
          </HowToUse.Card>
        ))}
      </HowToUse.CardList>

      <HowToUse.Footer
        message="今日から旅を始めましょう！"
        linkHref="/get-started"
        linkContent="今すぐ始める"
        className="custom-footer"
        style={{marginTop: '3rem'}}
      />
    </HowToUse>
  );
}

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。