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

フッターブロック

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

🚀 インストール​

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

📖 使用法​

import {Footer} from '@nodeblocks/frontend-footer-block';
ライブエディター
function SimpleFooter() {
  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必須フッターの下部に表示する著作権テキストまたはコンポーネント
spacingnumber | string2子要素間のスペース（MUI Stackのspacing）
classNamestringundefinedフッターコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ backgroundColor: 'primary.main', color: 'primary.contrastText', py: 3, px: 2, typography: 'body2' }カスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティ（component="footer"としてレンダリング）を継承します。

サブコンポーネント​

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

MUI Boxコンテナ内にフッターロゴをレンダリングします。

プロパティ型デフォルト説明
logoSrcstringコンテキスト値ロゴ画像のURLまたはパス（コンテキストのlogoSrcをオーバーライド）
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ pb: 0.5 }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Boxコンポーネントプロパティを継承します。ロゴはBox内にalt="Footer logo"を持つ<img>要素としてレンダリングされます。

Footer.Content​

MUI Boxを使用してフッターコンテンツセクションをレンダリングします。

プロパティ型デフォルト説明
contentReactNodeコンテキスト値表示するコンテンツ（コンテキストのcontentをオーバーライド）
childrenReactNodeundefinedコンテンツを提供する代替方法（contentが提供されない場合に使用）
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Boxコンポーネントプロパティを継承します。優先順位: contentプロパティ > childrenプロパティ。

Footer.Copyright​

MUI Boxを使用して著作権セクションをレンダリングします。

プロパティ型デフォルト説明
copyrightReactNodeコンテキスト値表示する著作権コンテンツ（コンテキストのcopyrightをオーバーライド）
childrenReactNodeundefined著作権コンテンツを提供する代替方法
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Boxコンポーネントプロパティを継承します。優先順位: copyrightプロパティ > childrenプロパティ。

🎨 設定例​

カスタム背景スタイリング​

<Footer
  logoSrc="/logo.svg"
  content={<p>フッターコンテンツ</p>}
  copyright="© 2024 会社"
  sx={{
    bgcolor: 'grey.900',
    color: 'grey.100',
    py: 4,
    px: 3,
  }}
/>

カスタムロゴコンテナスタイリング​

<Footer.Logo 
  sx={{ 
    pb: 2,
    '& img': {
      maxHeight: 40,
      width: 'auto',
    }
  }}
/>

ボーダー付きカスタム著作権​

<Footer.Copyright
  sx={{
    pt: 2,
    mt: 2,
    borderTop: '1px solid',
    borderColor: 'grey.800',
  }}
/>

🔧 TypeScriptサポート​

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

import {Footer} from '@nodeblocks/frontend-footer-block';
import {StackProps, BoxProps} from '@mui/material';
import {ReactNode} from 'react';

// メインコンポーネントプロパティはMUI StackPropsを拡張
interface FooterProps extends Omit<StackProps, 'content' | 'children'> {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
  children?: BlocksOverride;
}

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

// 型付きプロパティの例
function TypedFooter() {
  return (
    <Footer
      logoSrc="/assets/logo.svg"
      content={
        <div>
          <p>連絡先: info@example.com</p>
          <p>電話: +1 (555) 123-4567</p>
        </div>
      }
      copyright="© 2024 会社名. All rights reserved."
      spacing={3}
      sx={{
        bgcolor: 'grey.900',
        color: 'grey.100',
      }}
    >
      <Footer.Logo sx={{pb: 1}} />
      <Footer.Content />
      <Footer.Copyright sx={{pt: 2, borderTop: '1px solid', borderColor: 'grey.800'}} />
    </Footer>
  );
}

📝 注意事項​

  • コンポーネントはデフォルトでspacing={2}のMUI Stackをfooter要素としてレンダリングします
  • デフォルトスタイリングにはbackgroundColor: 'primary.main'、color: 'primary.contrastText'、パディング（py: 3, px: 2）、typography: 'body2'が含まれます
  • Footer.LogoはBox内にalt="Footer logo"を持つ<img>要素をレンダリングします
  • Footer.ContentとFooter.Copyrightはコンテキスト値と直接のchildrenの両方をサポートします
  • すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
  • ブロックオーバーライドパターンにより、カスタムブロックの挿入と並べ替えが可能です

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