AuthExperimental
ログイン・サインアップ用の分割画面レイアウトです。
プレビュー
状態とバリエーション
AuthTemplate が持つ差し替え口は logo・quote・quoteAuthor の3つです。左の紹介パネルは横幅が広いときだけ現れ、フォームは常に中央に置かれます。
既定のパネル
logo も quote も渡さないときは、組み込みのロゴと推薦文がそのまま出ます。組み込みの推薦文は英語なので、日本語の画面では次の例のように quote を渡して差し替えます。
推薦文を差し替える
quote と quoteAuthor を渡すと、紹介パネルの引用が置き換わります。自社の利用者の声を出す場所です。
ロゴを差し替える
logo にはノードをそのまま渡せます。画像でも、文字と印を組み合わせた行でもかまいません。
View as a full app
AuthTemplate is wired into a working multi-page mini-site at /patterns/auth — login, signup, forgot-password, and a post-login account screen with mock state.
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| logo | React.ReactNode | - | Custom logo element to display in the header/panel. |
| quote | string | - | Testimonial quote text displayed in the side panel. |
| quoteAuthor | string | - | Author name for the testimonial quote. |
| children | React.ReactNode | - | The authentication form content. |
| className | string | - | Additional classes for the root container. |
Usage
import { AuthTemplate } from "@gunjo/ui";
import { LoginForm } from "./LoginForm"; // Example component
export function AuthPage() {
return (
<AuthTemplate>
<LoginForm />
</AuthTemplate>
)
}