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

FAQブロック

FAQコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなFAQアコーディオンです。モダンなデザインパターン、展開/折りたたみ可能なセクション、柔軟なカスタマイズオプションを備えた完全なよくある質問インターフェースを提供します。一貫したスタイリングのためにMUIコンポーネント上に構築されています。

🚀 インストール​

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

📖 使用法​

import {FAQ} from '@nodeblocks/frontend-faq-block';
ライブエディター
function SimpleFAQ() {
  const faqItems = [
    {
      question: "このサービスは何ですか？",
      answer: "これはビジネス運営を効率的に管理するのに役立つ包括的なプラットフォームです。"
    },
    {
      question: "どのように始めればよいですか？",
      answer: "アカウントにサインアップし、プロファイルを完成させれば、すぐにすべての機能を使い始めることができます。"
    },
    {
      question: "無料トライアルはありますか？",
      answer: "はい、すべての機能に完全にアクセスできる14日間の無料トライアルを提供しています。クレジットカードは不要です。"
    },
    {
      question: "サポートに連絡するにはどうすればよいですか？",
      answer: "メール、ライブチャット、または営業時間内にサポートホットラインに電話することでサポートチームに連絡できます。"
    }
  ];

  return (
    <FAQ
      faqTitle="よくある質問"
      subtitle="私たちのサービスに関する最も一般的な質問への回答を見つけてください"
      items={faqItems}
    >
      <FAQ.Title />
      <FAQ.ItemList />
    </FAQ>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
faqTitleReactNode必須FAQセクションの上部に表示されるメインタイトル
subtitleReactNode必須メインタイトルの下に表示されるサブタイトルまたは説明
itemsArray<{question: string, answer: string}>必須質問と回答を含むFAQアイテムの配列
classNamestringundefinedFAQコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ px: 2, py: 5 }カスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。デフォルトspacing={5}。

サブコンポーネント​

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

FAQ.Title​

MUI StackとTypographyコンポーネントを使用してFAQタイトルセクションをレンダリングします。

プロパティ型デフォルト説明
faqTitleReactNodeコンテキスト値タイトルコンテンツ（コンテキストをオーバーライド）
subtitleReactNodeコンテキスト値サブタイトルコンテンツ（コンテキストをオーバーライド）
childrenReactNodeコンテキストのfaqTitleカスタムコンテンツ - faqTitleをオーバーライド
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ textAlign: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。タイトルはTypography variant="h6"とcolor="primary.main"でレンダリングされます。サブタイトルはTypography variant="h4"でレンダリングされます。タイトルとサブタイトル間の内部スペーシングは1にハードコードされています。

FAQ.Item​

MUI Accordionを使用して個別のFAQアコーディオンアイテムをレンダリングします。

プロパティ型デフォルト説明
questionstring必須アコーディオンヘッダーに表示する質問テキスト
answerstring必須アコーディオンが展開されたときに表示する回答テキスト
indexnumber必須FAQリスト内のこのアイテムのインデックス
isActiveboolean必須このアコーディオンアイテムが現在展開されているかどうか
onToggle(index: number) => void必須アコーディオンの状態を切り替えるコールバック関数
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Accordionコンポーネントプロパティ（onToggleを除く）を継承します。質問はprimary.main色で"Q."プレフィックス付きで表示されます。

FAQ.ItemList​

MUI Stackを使用して仕切り付きのFAQアイテムリストをレンダリングします。

プロパティ型デフォルト説明
itemsArray<{question: string, answer: string}>コンテキスト値FAQアイテム配列（コンテキストをオーバーライド）
activeIndexnumber | nullコンテキスト値現在アクティブ/展開されているアイテムインデックス（コンテキストをオーバーライド）
toggleAccordion(index: number) => voidコンテキスト値トグルコールバック（コンテキストをオーバーライド）
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。アイテムリストの前後にDividerをレンダリングします。

🎨 設定例​

カスタムタイトルスタイリング​

<FAQ.Title 
  sx={{ 
    textAlign: 'left',
    backgroundColor: 'primary.light',
    p: 3,
    borderRadius: 2
  }}>
  カスタムFAQタイトル
</FAQ.Title>

カスタムアイテムリストスタイリング​

<FAQ.ItemList 
  sx={{ 
    backgroundColor: 'background.paper',
    borderRadius: 2,
    boxShadow: 1,
    p: 2
  }} 
/>

🔧 TypeScriptサポート​

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

import {FAQ} from '@nodeblocks/frontend-faq-block';
import {StackProps, AccordionProps} from '@mui/material';
import {ReactNode} from 'react';

// 個別FAQアイテムインターフェース
interface FAQItem {
  question: string;
  answer: string;
}

// メインコンポーネントプロパティはMUI StackPropsを拡張
interface FAQProps extends Omit<StackProps, 'children'> {
  faqTitle: ReactNode;
  subtitle: ReactNode;
  items: FAQItem[];
  children?: BlocksOverride;
}

// MUIスタイリングの例
function CustomStyledFAQ() {
  const faqData: FAQItem[] = [
    {
      question: 'どのような支払い方法を受け付けていますか？',
      answer: '主要クレジットカード、PayPal、銀行振込をすべて受け付けています。',
    },
    {
      question: 'サブスクリプションをキャンセルするにはどうすればよいですか？',
      answer: 'アカウント設定からいつでもサブスクリプションをキャンセルできます。',
    },
  ];

  return (
    <FAQ
      faqTitle="カスタマーサポート"
      subtitle="よくある質問への迅速な回答を得る"
      items={faqData}
      className="my-custom-faq"
      spacing={4}
      sx={{maxWidth: 800, mx: 'auto'}}
    >
      <FAQ.Title sx={{textAlign: 'left'}}>🙋‍♀️ よくある質問</FAQ.Title>
      <FAQ.ItemList sx={{mt: 2}} />
    </FAQ>
  );
}

📝 注意事項​

  • コンポーネントはデフォルトでspacing={5}のMUI Stackを使用してレイアウトします
  • デフォルトパディングはpx: 2（水平）とpy: 5（垂直）です
  • FAQアイテムはExpandMoreアイコン付きのMUI Accordionを使用します
  • タイトルセクションはメインタイトルをvariant="h6"でprimary.main色で表示します
  • サブタイトルはvariant="h4"で表示されます
  • 質問はprimary.main色で太字スタイリングの"Q."プレフィックス付きです
  • DividerコンポーネントはFAQアイテムリストの前後にレンダリングされます
  • 一度に1つのアコーディオンアイテムのみ展開可能です（activeIndex状態で制御）
  • すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
  • ブロックオーバーライドパターンにより、デフォルトブロック間にカスタムブロックを挿入できます

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