@acpaas-ui/ngx-user-menu 中文文档教程

Question

@acpaas-ui/ngx-user-menu

UserMenu

可以在网页上使用用户菜单组件来提供可视化的登录和注销按钮。 如果注销，该组件会显示一个按钮，使用户能够登录。 如果已登录，该组件会提供一个头像按钮，显示一个带有注销按钮的弹出按钮。

该组件在其标签内使用 content projection，这意味着包含任何 html aui-user-menu 标签之间的内容将插入弹出部分。 显示注销按钮 默认情况下，但如果您希望实现自定义注销按钮，则可以将其禁用。

两个输出事件可用于挂钩登录或注销功能到界面：

• login$: Triggered when user clicks on the login button
• logout$: Triggered when user clicks on the logout button

您负责提供登录和注销功能，此组件仅提供视觉效果。

Usage

在您的模块中：

import { UserMenuModule } from '@acpaas-ui/ngx-user-menu';

@NgModule({
    imports: [
        UserMenuModule
    ]
})
export class AppModule { }

在您的模板中：

<aui-user-menu [user]="userObject" flyoutSize="Medium" [notificationsCount]="100" (logout$)="logoutUser()" (login$)="loginUser()" [translations]="translations">
    <div class="u-margin-lg u-text-center">
        Your Content Here
    </div>
</aui-user-menu>

组件输入：

public mockUser: UserMenu.IUser = {
        firstName: 'John',
        lastName: 'Doe',
        avatarUrl: 'https://gravatar.com/avatar/66f865ee03bc019d2f06af6ec0c434ce?s=200'
    };
public translations: UserMenu.ITranslations = {
    login: 'Login',
    logout: 'Logout',
    userAvatar: 'User avatar',
};
public logoutUser(){
    alert('User is logged out!');
}
public loginUser(){
    alert('User is logged in!');
}

Documentation

Component Inputs

Input	Type	Required	Default Value
user	UserMenu.IUser	Yes, if logged in	-
direction	string: 'right'	'left'	-
flyoutSize	Flyout.EFlyoutSize	-	FlyoutSize.Small
notificationsCount	number	-	-
showLogoutButton	boolean	-	true
translations	UserMenu.ITranslations	-	EN labels

Component Outputs

Output	Type	Required	Default Value
login$	EventEmitter	-	EventEmitter
logout$	EventEmitter	-	EventEmitter

访问我们的文档网站，获取完整的操作文档和指南

Contributing

访问我们的 Contribution Guidelines 获取更多关于如何贡献的信息。