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

フッターブロック

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

🚀 インストール​

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

📖 使用法​

import {Footer} from '@nodeblocks/frontend-footer-block';
function BasicFooter() {
  return (
    <Footer
      logoSrc="/img/icon-small.png"
      content={
        <div>
          <p>Your trusted partner for business solutions.</p>
          <p>Contact us: info@example.com | +1 (555) 123-4567</p>
        </div>
      }
      copyright="© 2024 Your Company Name. All rights reserved.">
      <Footer.Logo />
      <Footer.Content />
      <Footer.Copyright />
    </Footer>
  );
}

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

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

プロパティ型デフォルト説明
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';

// Main component interface
interface FooterProps extends Omit<ComponentProps<'footer'>, 'content'> {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
}

// Context type (values passed to all sub-components)
interface FooterContextValue {
  logoSrc: string;
  copyright: ReactNode;
  content: ReactNode;
}

// Example with comprehensive footer content
function CustomFooter() {
  return (
    <Footer
      logoSrc="/assets/company-logo.svg"
      content={
        <div>
          <div>
            <h4>Contact Information</h4>
            <p>Email: info@company.com</p>
            <p>Phone: +1 (555) 123-4567</p>
            <p>Address: 123 Business St, City, State 12345</p>
          </div>
          <div>
            <h4>Quick Links</h4>
            <ul>
              <li>
                <a href="#about">About Us</a>
              </li>
              <li>
                <a href="#services">Services</a>
              </li>
              <li>
                <a href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      }
      copyright="© 2024 Your Company Name. All rights reserved."
      className="custom-footer">
      <Footer.Logo className="company-logo" alt="Company Logo" />
      <Footer.Content className="footer-main-content" />
      <Footer.Copyright className="footer-copyright" style={{fontSize: '14px', color: '#666'}}>
        © 2024 Custom Company. All rights reserved. | Privacy Policy | Terms of Service
      </Footer.Copyright>
    </Footer>
  );
}

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