認証・エラーレイアウト

ログイン / 登録 / パスワード再設定 / ロック画面と、エラーページ（400、403、404、500、503）向けの独立したレイアウト。テキストは翻訳済みです。

AuthLayout

AuthLayout

Vue

<div class="auth-frame"><ThlAuthLayout title="Sign in"><ThlField label="Email"><ThlInput type="email" /></ThlField><ThlField label="Password"><ThlInput type="password" /></ThlField><ThlButton variant="danger" block>Log in</ThlButton></ThlAuthLayout></div>

React

<AuthLayout title={t('pages.login.title')}>
  <Form …>…</Form>
</AuthLayout>

Angular

<thl-auth-layout [title]="'pages.login.title' | thlT">
  <form …>…</form>
</thl-auth-layout>

ErrorLayout

ErrorLayout

Vue

<div class="auth-frame"><ThlErrorLayout :code="404" home-href="#" /></div>

React

<ErrorLayout code={404} homeHref="/" />

Angular

<thl-error-layout [code]="404" homeHref="/" />

API

AuthLayout

<ThlAuthLayout> · import { ThlAuthLayout } from '@thl-ui/vue'

Prop	型	デフォルト
title	string	—
avatar	string	—

スロット: logodefaultfooter

ErrorLayout

<ThlErrorLayout> · import { ThlErrorLayout } from '@thl-ui/vue'

Prop	型	デフォルト
code*	number	—
title	string	—
text	string	—
homeHref	string	"/"

スロット: action