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

Footerブロック

Footerコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなフッターセクションです。モダンなデザインパターン、ロゴ表示、コンテンツセクション、柔軟なカスタマイズオプションを備えた完全なWebサイトフッターインターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-footer-block

📖 使用法​

import {Footer} from '@nodeblocks/frontend-footer-block';
ライブエディター
function BasicFooter() {
  return (
    <Footer
      logoSrc="/img/icon-small.png"
      content={
        <div>
          <p>ビジネスソリューションの信頼できるパートナー。</p>
          <p>お問い合わせ: info@example.com | +1 (555) 123-4567</p>
        </div>
      }
      copyright="© 2024 あなたの会社名. All rights reserved.">
      <Footer.Logo />
      <Footer.Content />
      <Footer.Copyright />
    </Footer>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
logoSrcstring必須フッターに表示するロゴ画像のURLまたはパス
contentReactNode必須フッターのメインコンテンツセクション（テキスト、リンクなどを含む）
copyrightReactNode必須フッターの下部に表示する著作権テキストまたはコンポーネント
classNamestringundefinedフッターコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

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

サブコンポーネント​

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

プロパティ型デフォルト説明
srcstringコンテキストのlogoSrcロゴ画像のURLまたはパス（コンテキストのlogoSrcをオーバーライド）

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

Footer.Content​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのcontentフッターコンテンツセクションに表示するコンテンツ（コンテキストのcontentをオーバーライド）

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

Footer.Copyright​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのcopyright表示する著作権テキストまたはコンテンツ（コンテキストのcopyrightをオーバーライド）

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

🔧 TypeScriptサポート​

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

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

// メインコンポーネントインターフェース
interface FooterProps extends Omit<ComponentProps<'footer'>, 'content'> {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
}

// コンテキストタイプ（すべてのサブコンポーネントに渡される値）
interface FooterContextValue {
  logoSrc: string;
  copyright: ReactNode;
  content: ReactNode;
}

// 包括的なフッターコンテンツの例
function CustomFooter() {
  return (
    <Footer
      logoSrc="/assets/company-logo.svg"
      content={
        <div>
          <div>
            <h4>連絡先情報</h4>
            <p>メール: info@company.com</p>
            <p>電話: +1 (555) 123-4567</p>
            <p>住所: 123 Business St, City, State 12345</p>
          </div>
          <div>
            <h4>クイックリンク</h4>
            <ul>
              <li>
                <a href="#about">私たちについて</a>
              </li>
              <li>
                <a href="#services">サービス</a>
              </li>
              <li>
                <a href="#contact">お問い合わせ</a>
              </li>
            </ul>
          </div>
        </div>
      }
      copyright="© 2024 あなたの会社名. All rights reserved."
      className="custom-footer">
      <Footer.Logo className="company-logo" alt="会社ロゴ" />
      <Footer.Content className="footer-main-content" />
      <Footer.Copyright className="footer-copyright" style={{fontSize: '14px', color: '#666'}}>
        © 2024 カスタム会社. All rights reserved. | プライバシーポリシー | 利用規約
      </Footer.Copyright>
    </Footer>
  );
}

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