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

フッターブロック

Footer は、MUI Stack をベースにしたサイトフッターで、デフォルトでは <footer> としてレンダリングされ、ロゴ、コンテンツ、著作権の各領域をプライマリーカラーのバー上に表示します。

インストール​

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

必要なもの​

項目理由
logoSrcFooter.Logo 用の画像 URL
contentフッターのメイン本文（リンク、テキスト、カスタム JSX など）
copyright著作権表示または法的表記（ReactNode。例: <>© 2024 …</>）
構成モード

Footer に logoSrc、content、copyright を渡すと、デフォルトのブロック（Footer.Logo、Footer.Content、Footer.Copyright）を描画します。compound children を使うとブロックのマークアップを置き換えられます（Footer.Content と Footer.Copyright の children は対応するルート props より優先されます）。function child で blocks と blockOrder を使えば、セクションの追加や順序変更ができます。

コード例​

ライブエディター
function Example() {
  const footerLinks = (
    <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
      <a href="#about" style={{color: 'inherit'}}>
        About Us
      </a>
      <a href="#contact" style={{color: 'inherit'}}>
        Contact Us
      </a>
    </div>
  );

  return (
    <Footer
      logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
      content={footerLinks}
      copyright={<>© 2024 Nodeblocks.</>}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
logoSrcstringはい-フッターロゴの URL (Footer.Logo は src またはこの値を使います)
contentReactNodeはい-フッターのメイン本文（リンク、テキスト、カスタム JSX など）
copyrightReactNodeはい-著作権表示または法的通知

コンテンツプロパティ​

logoSrc、content、copyright をルートに設定します。サブコンポーネントは、ローカル props または children（コンパウンドモード）を渡さない限り、コンテキストからこれらを読み取ります。

コンポーネントプロパティ型必須デフォルト説明
Logosrcstringいいえルートの logoSrcロゴ画像の URL。src が設定されている場合はそれを使い、そうでなければ logoSrc を使います
LogoaltstringいいえFooter logo画像の alt テキスト
LogologoSrcstringはいルートの logoSrc公開コンポーネント型で必須。ブロックのフォールバック URL を指定します
Logo—BoxProps<'img'>いいえ-その他の img props（className、sx など）
ContentchildrenReactNodeいいえルートの contentコンテンツのマークアップ（children ?? content）
ContentcontentReactNodeいいえルートの contentこのブロックのコンテキストを上書きします
CopyrightchildrenReactNodeいいえルートの copyright著作権のマークアップ（children ?? copyright）
CopyrightcopyrightReactNodeいいえルートの copyrightこのブロックのコンテキストを上書きします

Logo、Content、Copyright はそれぞれ Footer.Logo、Footer.Content、Footer.Copyright です。

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

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえ-コンパウンドサブコンポーネント、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえ-ルートコンテナのクラス名（デフォルトで nbb-footer が適用されます）
sxSxPropsいいえ-ルートコンテナ用の MUI システムスタイル

Footer は MUI の StackProps（children と content を除く）を継承し、spacing（デフォルトは { xs: 2, sm: 4 }）、direction（デフォルトは { xs: 'column', sm: 'row' }）、id を含みます。ルートは component="footer"、backgroundColor: primary.main、color: primary.contrastText、レスポンシブなパディングを使用します。レンダリング順序は logo、content、copyright で、defaultBlockOrder も logo、content、copyright です。

デフォルト UI ブロック​

ブロック基盤備考
Footer（ルート）Stack（component="footer"）プライマリーバー。direction は column（xs）/ row（sm+）
Footer.LogoBox（component="img"）alt のデフォルトは Footer logo。src は logoSrc がない場合にフォールバックします
Footer.ContentBoxflex: 1、typography: body2
Footer.CopyrightBoxtypography: body2

TypeScript​

import { Footer } from '@nodeblocks/frontend-footer-block';
import type { ReactNode } from 'react';

type FooterConfig = {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
};

const config: FooterConfig = {
  logoSrc: 'https://docs.nodeblocks.dev/img/icon-small.png',
  content: (
    <a href="#about" style={{ color: 'inherit' }}>
      About Us
    </a>
  ),
  copyright: <>© 2024 Nodeblocks.</>,
};

<Footer {...config} />;