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

Heroブロック

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

🚀 インストール​

npm install @nodeblocks/frontend-hero-block

📖 使用法​

import {Hero} from '@nodeblocks/frontend-hero-block';
ライブエディター
function BasicHero() {
  return (
    <Hero
      buttonText="始める"
      byline="私たちのプラットフォームへようこそ"
      imageUrl="/img/undraw_docusaurus_mountain.svg"
      onClickButton={() => {
        console.log('ヒーローボタンがクリックされました');
      }}>
      <Hero.HeroContent>
        <Hero.HeroContent.HeroByline style={{color: 'black'}} />
        <Hero.HeroContent.ActionButton />
      </Hero.HeroContent>
      <Hero.HeroImg />
    </Hero>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
buttonTextstring必須アクションボタンに表示するテキスト
bylineReactNode必須ヒーローセクションのメインヘッドラインテキスト
imageUrlstring必須ヒーローセクションに表示する画像のURL
onClickButton() => void必須アクションボタンがクリックされたときにトリガーされるコールバック関数
secondaryTextReactNodeundefinedバイラインの下に表示されるセカンダリテキスト
tertiaryTextReactNodeundefinedアクションボタンの近くに表示されるターシャリテキスト
classNamestringundefinedヒーローコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

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

サブコンポーネント​

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

Hero.HeroImg​

プロパティ型デフォルト説明
srcstringコンテキストのimageUrl表示する画像のURL（コンテキストのimageUrlをオーバーライド）

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

Hero.HeroContent​

このコンポーネントはコンテナとして機能し、カスタム子要素が提供されない限り、ネストされたコンテンツコンポーネントを自動的にレンダリングします。

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

Hero.HeroContent.HeroByline​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのbylineメインヘッドラインとして表示するコンテンツ（コンテキストのbylineをオーバーライド）

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

Hero.HeroContent.SecondaryText​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsecondaryTextセカンダリテキストとして表示するコンテンツ（コンテキストのsecondaryTextをオーバーライド）

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

Hero.HeroContent.ActionButton​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのbuttonTextボタンコンテンツ/テキスト（コンテキストのbuttonTextをオーバーライド）
onClick() => voidコンテキストのonClickButtonアクションボタンのクリックハンドラー（コンテキストのonClickButtonをオーバーライド）

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

Hero.HeroContent.TertiaryText​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのtertiaryTextターシャリテキストとして表示するコンテンツ（コンテキストのtertiaryTextをオーバーライド）

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

🔧 TypeScriptサポート​

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

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

// メインコンポーネントインターフェース
interface HeroProps extends Omit<ComponentProps<'div'>, 'children'> {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  className?: string;
}

// 包括的なヒーロー設定の例
function CustomHero() {
  const handleButtonClick = () => {
    console.log('ヒーローボタンがクリックされました！');
    // ナビゲーションやアクションを処理
  };

  return (
    <Hero
      buttonText="今すぐ始める"
      byline="私たちのプラットフォームでビジネスを変革"
      imageUrl="/assets/hero-image.jpg"
      onClickButton={handleButtonClick}
      secondaryText="業務を効率化し、生産性を向上させます"
      tertiaryText="30日間無料トライアル • クレジットカード不要"
      className="custom-hero-section"
      style={{ minHeight: '600px' }}
      id="hero-section">
      <Hero.HeroContent className="hero-content-custom">
        <div>
          <Hero.HeroContent.HeroByline 
            className="custom-headline"
            style={{ fontSize: '3rem', fontWeight: 'bold' }}
          />
          <Hero.HeroContent.SecondaryText 
            className="custom-subtext"
            style={{ color: '#666', marginTop: '1rem' }}
          />
        </div>
        <div>
          <Hero.HeroContent.ActionButton 
            className="custom-cta-button"
            type="button"
            disabled={false}
          >
            🚀 無料トライアル開始
          </Hero.HeroContent.ActionButton>
          <Hero.HeroContent.TertiaryText 
            className="custom-disclaimer"
            style={{ fontSize: '0.9rem', opacity: 0.8 }}
          />
        </div>
      </Hero.HeroContent>
      <Hero.HeroImg 
        className="hero-image-custom"
        alt="ヒーロー背景画像"
        width={600}
        height={400}
        loading="lazy"
      />
    </Hero>
  );
}

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