帳戶

一個組件，用於為您的應用程式呈現帳戶管理下拉選單。

Account 組件是一種快速簡便的方式，為已驗證的使用者顯示帳戶管理選單。它與 SignInPage 和 DashboardLayout 組件深度整合，這表示一旦使用者透過 SignInPage 登入，它就會自動出現在 DashboardLayout 內的頂部導覽列中。

狀態

已登入

如果存在 session 物件，組件會呈現為一個下拉選單，其中包含使用者的帳戶詳細資訊以及登出的選項。

已登出

登出時，組件會在儀表板版面配置中呈現為內嵌的登入按鈕。

自訂

<Account /> 組件由多個子組件組成

• <SignInButton />
• <AccountPreview />
• <Popover />
• <SignOutButton />

您可以透過 <Account /> 組件上的 slotProps 屬性將額外的 props 傳遞給它們。您也可以透過 slots 屬性將您自己的自訂組件傳遞給 <Account /> 來完全覆寫它們。

標籤可以透過 localeText 屬性自訂。

Slot Props

AccountPreview 組件有兩種變體，condensed（預設）和 expanded。您可以透過 slotProps 傳遞自訂 props 來變更 <Account /> 內使用的變體。

Slots

您可以透過 slots 屬性將您自己的組件傳遞到 Account popover 內。

Popover 內容

您可以將預設的子組件（例如 SignOutButton 和 AccountPreview）包裝在 AccountPopoverHeader 和 AccountPopoverFooter 組件中，以建立自訂的帳戶 popover，如下列範例所示

帳戶切換器

您可以透過傳遞一個組件來建立進階選單（例如租戶切換器），該組件使用自訂選單包裝 AccountPreview 和 SignOutButton。

本地化

您可以使用 localeText 屬性傳遞自訂標籤，包括不同語言的標籤。

Session

您可以使用 useSession hook 來擴展現有的 session 並新增其他使用者詳細資訊

您可以在 useSession 文件頁面 上找到更多詳細資訊。

API

請參閱以下文件，以取得此處提及的所有組件可用的 props 和 classes 的完整參考。

• <Account />
• <AccountPopoverFooter />
• <AccountPopoverHeader />
• <AccountPreview />
• <SignInButton />
• <SignOutButton />