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

FAQブロック

FAQ は、MUI 上に構築されたアコーディオン形式のよくある質問ブロックで、中央揃えのタイトル、サブタイトル、展開可能な質問と回答の項目を備えています。

インストール​

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

必要なもの​

項目用途
faqTitleプライマリ見出し
subtitleタイトル下の補助テキスト
itemsアコーディオン行としてレンダリングされる Q&A ペア
コンテンツはアプリ側で管理する

FAQ はアコーディオンの展開/折りたたみを内部で管理します。ページまたは CMS から faqTitle、subtitle、items を渡してください。各項目には question と answer の文字列が必要です。

コード例​

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

  return (
    <FAQ
      faqTitle="よくある質問"
      subtitle="サービスに関するよくある質問への回答をご覧ください"
      items={faqItems}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
faqTitleReactNodeはい-FAQ.Title でレンダリングされるプライマリ見出し
subtitleReactNodeはい-タイトル下の補助テキスト
items{ question: string; answer: string }[]はい-FAQ.ItemList でアコーディオン行にマッピングされる FAQ エントリ

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

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

FAQ は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: title、item、itemList。

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

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

サブコンポーネント主要プロパティ継承ベース
FAQ.TitlefaqTitle、subtitle、children、spacing（デフォルト 1）、className、sxStackPropsStack + Typography
FAQ.ItemListitems、activeIndex、toggleAccordion、children、className、sxStackPropsStack + Divider + FAQ.Item 行
FAQ.Itemquestion、answer、index、isActive、onToggle、className、sxAccordionPropsAccordion + AccordionSummary + AccordionDetails + ExpandMore アイコン

デフォルト UI ブロック​

ブロックベース備考
FAQ（ルート）Stackレスポンシブな間隔の縦レイアウト（nbb-faq）
title（FAQ.Title）Stack + Typography中央揃えのタイトル（variant="h6" / レスポンシブ h4）とサブタイトル（variant="h1"）
itemList（FAQ.ItemList）Stack + Divideritems を上下に Divider 付きの FAQ.Item アコーディオンにマッピング
item（FAQ.Item）AccordionQ. プレフィックス、太字の質問、回答本文を持つ単一行

デフォルトのルートレンダリング順序: title → itemList。

TypeScript​

import * as React from 'react';
import { FAQ } from '@nodeblocks/frontend-faq-block';
import type { ReactNode } from 'react';

type FaqItem = {
  question: string;
  answer: string;
};

type FaqSectionProps = {
  faqTitle: ReactNode;
  subtitle: ReactNode;
  items: FaqItem[];
};

export function FaqSection({ faqTitle, subtitle, items }: FaqSectionProps) {
  return <FAQ faqTitle={faqTitle} subtitle={subtitle} items={items} />;
}