ホーム/コンポーネント/データ表示/詳細ページ DetailPage

DetailPage

詳細ページのレイアウトコンポーネント群。Header / Content / SectionTitle / Description。

import { DetailPageHeader, DetailPageContent, DetailPageSectionTitle, DetailPageDescription } from "@blueai/ui"

Examples

Composition

INV-2025-0042

基本情報

この請求書の詳細情報が表示されます。

<DetailPageHeader
  title="INV-2025-0042"
  description="請求書の詳細情報を表示します。"
  action={
    <div className="flex gap-2">
      <FormButton variant="outline" size="sm">PDF出力</FormButton>
      <FormButton variant="primary" size="sm">編集</FormButton>
    </div>
  }
/>
<DetailPageContent>
  <DetailPageSectionTitle>基本情報</DetailPageSectionTitle>
  <DetailPageDescription>
    この請求書の詳細情報が表示されます。
  </DetailPageDescription>
</DetailPageContent>

Props

Prop	Type	Default	Description
title*	ReactNode	—	ページタイトル (Header)
description*	string	—	タイトルクリック時に表示される説明文 (Header)
icon	ReactNode	—	タイトル横のアイコン (Header)
action	ReactNode	—	右端のアクションボタン (Header)
tabs	Tab[]	—	タブ定義 { key, label } (Header)
children*	ReactNode	—	コンテンツ