账户

一个用于渲染应用程序账户管理下拉菜单的组件。

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 弹出框内。

弹出框内容

您可以包装默认的子组件 – 例如 SignOutButton 和 AccountPreview – 并将它们包装在 AccountPopoverHeader 和 AccountPopoverFooter 组件中，以创建自定义账户弹出框，如下面的演示所示

账户切换器

您可以通过传入一个组件来构建高级菜单 – 例如租户切换器 – 该组件使用自定义菜单包装 AccountPreview 和 SignOutButton

本地化

您可以使用 localeText 属性传入自定义标签 – 包括不同语言的标签。

Session

您可以使用 useSession hook 来扩展现有会话并添加额外的用户详细信息

您可以在 useSession 文档页面上找到更多详细信息。

API

请参阅下面的文档，以获得此处提及的所有组件的 props 和类别的完整参考。

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