BannalyzeExperimental
Bannalyze 用テンプレートです。
プレビュー
状態とバリエーション
header・sidebar・inspector はどれも省略できます。左の履歴は中くらいの幅から、右の解析結果は広い幅から現れ、真ん中の画像は常に中央に置かれます。
履歴と解析結果つき
左に過去の版、右に解析結果を並べた標準形です。真ん中は見るものだけに使います。
夏の広告 v3
解析する画像
解析結果を閉じる
inspector を省くと画像が右まで広がります。解析の前や、結果を別の画面で見せるときの形です。
夏の広告 v3
解析する画像
画像だけ
children だけを渡すと、余計なものが消えて画像だけが残ります。発表や確認のときに使います。
解析する画像
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| header | React.ReactNode | - | Content for the top navigation bar. |
| sidebar | React.ReactNode | - | Content for the left sidebar (navigation, history). |
| children | React.ReactNode | - | The main content area (canvas, center stage). |
| inspector | React.ReactNode | - | Content for the right sidebar (analysis results, details). |
| className | string | - | Additional classes for the root container. |
Usage
import { BannalyzeTemplate } from "@gunjo/ui";
export function AnalysisPage() {
return (
<BannalyzeTemplate
header={<div>Header Content</div>}
sidebar={<div>Sidebar List</div>}
inspector={<div>Analysis Data</div>}
>
<div className="flex items-center justify-center h-full">
<img src="/banner.jpg" alt="Banner" />
</div>
</BannalyzeTemplate>
)
}