Skip to main content
BlueAI
BlueAIBlueAI Design System
JAEN
Home/Components/Data Display/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

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