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

ヒーローブロック

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

🚀 インストール​

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

📖 使用法​

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 />
        <Hero.HeroContent.ActionButton />
      </Hero.HeroContent>
      <Hero.HeroImg />
    </Hero>
  );
}
結果
Loading...

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

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

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

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

サブコンポーネント​

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

Hero.HeroImg​

MUI Boxをcomponent="img"で使用してヒーロー画像をレンダリングします。

プロパティ型デフォルト説明
imageUrlstringコンテキスト値画像のURL（コンテキストから）
srcstringundefined画像のURL（imageUrlをオーバーライド）
altstring'hero image'画像の代替テキスト
componentElementType'img'レンダリングするコンポーネントタイプ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Boxコンポーネントプロパティを継承します。画像ソースの優先順位: srcプロパティ > imageUrlコンテキスト値。

Hero.HeroContent​

MUI Stackを使用したヒーローテキストコンテンツのコンテナ。

プロパティ型デフォルト説明
spacingnumber | string3子要素間のスペース
childrenReactNodeデフォルトレイアウトカスタムコンテンツ（デフォルトレイアウトを置き換え）
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ alignItems: 'center', py: 5.5 }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。childrenが提供されない場合、HeroByline、SecondaryText、ActionButton、TertiaryTextを含むデフォルトレイアウトをレンダリングします。

Hero.HeroContent.HeroByline​

MUI Typographyを使用してメインヘッドラインをレンダリングします。

プロパティ型デフォルト説明
bylineReactNodeコンテキスト値ヘッドラインコンテンツ（コンテキストから）
childrenReactNodeundefinedヘッドラインコンテンツ（bylineをオーバーライド）
variantTypographyVariant'h6'MUI Typographyバリアント
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

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

Hero.HeroContent.SecondaryText​

MUI Typographyを使用してセカンダリテキストをレンダリングします。コンテンツが提供されない場合はnullを返します。

プロパティ型デフォルト説明
secondaryTextReactNodeコンテキスト値セカンダリテキストコンテンツ（コンテキストから）
childrenReactNodeundefinedセカンダリテキストコンテンツ（secondaryTextをオーバーライド）
variantTypographyVariant'h2'MUI Typographyバリアント
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ textAlign: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Typographyコンポーネントプロパティを継承します。childrenもsecondaryTextも提供されない場合はnullを返します。

Hero.HeroContent.ActionButton​

MUI Buttonを使用してコールトゥアクションボタンをレンダリングします。

プロパティ型デフォルト説明
buttonTextstringコンテキスト値ボタンテキスト（コンテキストから）
childrenReactNodeundefinedボタンコンテンツ（buttonTextをオーバーライド）
onClickButton() => voidコンテキスト値クリックハンドラー（コンテキストから）
onClick() => voidundefinedクリックハンドラー（onClickButtonをオーバーライド）
variantButtonVariant'contained'MUI Buttonバリアント
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>{ fontWeight: 600, px: 4, py: 1.5 }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Buttonコンポーネントプロパティを継承します。クリックハンドラーの優先順位: onClickプロパティ > onClickButtonコンテキスト値。

Hero.HeroContent.TertiaryText​

MUI Typographyを使用してターシャリテキストをレンダリングします。コンテンツが提供されない場合はnullを返します。

プロパティ型デフォルト説明
tertiaryTextReactNodeコンテキスト値ターシャリテキストコンテンツ（コンテキストから）
childrenReactNodeundefinedターシャリテキストコンテンツ（tertiaryTextをオーバーライド）
colorTypographyColor'primary'MUI Typographyカラー
variantTypographyVariant'button'MUI Typographyバリアント
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxProps<Theme>テーマベースのスタイリングカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Typographyコンポーネントプロパティを継承します。childrenもtertiaryTextも提供されない場合はnullを返します。デフォルトのsxにはbody1からのlineHeightとh1からのfontWeightが含まれます。

🎨 設定例​

カスタムヒーローレイアウト​

<Hero
  buttonText="詳細を見る"
  byline="自信を持ってイノベーションを"
  imageUrl="/hero.jpg"
  onClickButton={() => {}}
  sx={{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    px: 8,
    py: 10,
  }}
/>

カスタムヒーロー画像スタイリング​

<Hero.HeroImg 
  sx={{ 
    maxWidth: 500,
    borderRadius: 4,
    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
    transition: 'transform 0.3s ease',
    '&:hover': {
      transform: 'scale(1.02)',
    },
  }}
/>

カスタムアクションボタンスタイリング​

<Hero.HeroContent.ActionButton 
  variant="outlined"
  sx={{ 
    borderWidth: 2,
    px: 6,
    py: 2,
    fontSize: '1.1rem',
    '&:hover': {
      borderWidth: 2,
      bgcolor: 'primary.main',
      color: 'primary.contrastText',
    },
  }}
/>

🔧 TypeScriptサポート​

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

import {Hero} from '@nodeblocks/frontend-hero-block';
import {StackProps, BoxProps, TypographyProps, ButtonProps} from '@mui/material';
import {ReactNode} from 'react';

// メインコンポーネントプロパティはMUI StackPropsを拡張
interface HeroProps extends Omit<StackProps, 'children'> {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  children?: BlocksOverride;
}

// コンテキストタイプ（すべてのサブコンポーネントに渡される値）
interface HeroContextValue {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
}

// 型付きプロパティの例
function TypedHeroExample() {
  return (
    <Hero
      buttonText="始める"
      byline="私たちのプラットフォームへようこそ"
      imageUrl="/hero-image.jpg"
      onClickButton={() => console.log('クリックされました')}
      secondaryText="より速く素晴らしい製品を構築"
      tertiaryText="クレジットカード不要"
      spacing={3}
      sx={{minHeight: '80vh'}}
    >
      <Hero.HeroContent spacing={4}>
        <Hero.HeroContent.HeroByline variant="h2" />
        <Hero.HeroContent.SecondaryText variant="h5" />
        <Hero.HeroContent.ActionButton variant="contained" color="primary" />
        <Hero.HeroContent.TertiaryText color="textSecondary" />
      </Hero.HeroContent>
      <Hero.HeroImg sx={{maxWidth: 500, borderRadius: 2}} />
    </Hero>
  );
}

📝 注意事項​

  • コンポーネントはルートコンテナとしてMUIのStackを使用します
  • Hero.HeroContentはデフォルトのspacing={3}を使用し、py: 5.5パディングでコンテンツを垂直方向に中央揃えします
  • Hero.HeroImgはMUI Boxをcomponent="img"で使用し、デフォルトの代替テキストは"hero image"です
  • ActionButtonはデフォルトスタイリングとしてfontWeight: 600、px: 4、py: 1.5を持ちます
  • SecondaryTextとTertiaryTextはコンテンツが提供されない場合nullを返します
  • TertiaryTextはlineHeightとfontWeightにテーマベースのスタイリングを使用します
  • すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
  • ブロックオーバーライドパターンにより、カスタムブロックの挿入と並べ替えが可能です

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