
Logout component
Used for site logout action
Set ChildContent
or write other components directly inside the component
Demo
Attributes
@page "/logouts"
@inject IStringLocalizer<Logouts> Localizer
<h3>Logout component</h3>
<h4>Used for site logout action</h4>
<DemoBlock Title="Common usage" Introduction="Use the built-in template directly" Name="Normal">
<Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-secondary" />
<div style="height: 80px;"></div>
</DemoBlock>
<DemoBlock Title="Only show avatars" Introduction="Set <code>ShowUserName</code> to <code>false</code>" Name="ShowUserName">
<Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" ShowUserName="false" class="bg-secondary" />
<div style="height: 80px;"></div>
</DemoBlock>
<DemoBlock Title="Custom display template" Introduction="Set <code>ChildContent</code> or write other components directly inside the component" Name="ChildContent">
<Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin">
<i class="fa-fw fa-solid fa-user"></i>
<span>Customize display content</span>
</Logout>
<div style="height: 80px;"></div>
</DemoBlock>
<DemoBlock Title="Custom Login Information Template" Introduction="set up <code>HeaderTemplate</code>" Name="HeaderTemplate">
<Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-warning">
<HeaderTemplate>
<div class="d-flex flex-fill align-items-center">
<img alt="avatar" src="_content/BootstrapBlazor.Shared/images/Argo-C.png" style="border-radius: 50%;">
<div class="flex-fill">
<div class="logout-dn">General manager</div>
<div class="logout-un">Admin</div>
</div>
</div>
</HeaderTemplate>
</Logout>
<div style="height: 80px;"></div>
</DemoBlock>
<DemoBlock Title="Custom link template" Introduction="set up <code>LinkTemplate</code>" Name="LinkTemplate">
<Logout ImageUrl="_content/BootstrapBlazor.Shared/images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-primary">
<LinkTemplate>
<a href="#">
<i class="fa-solid fa-user"></i><span>personal center</span>
</a>
<a href="#">
<i class="fa-solid fa-gear"></i><span>set up</span>
</a>
<LogoutLink />
</LinkTemplate>
</Logout>
<div style="height: 220px;"></div>
</DemoBlock>
<AttributeTable Items="GetAttributes()"></AttributeTable>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class Logouts
{
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = nameof(Logout.ImageUrl),
Description = "登出组件当前用户头像",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Logout.DisplayName),
Description = "登出组件当前用户显示文字",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Logout.PrefixDisplayNameText),
Description = "登出组件当前用户显示文字前置文字",
Type = "string",
ValueList = " — ",
DefaultValue = "欢迎"
},
new AttributeItem() {
Name = nameof(Logout.UserName),
Description = "登出组件当前用户登录账号",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Logout.ShowUserName),
Description = "是否显示用户名",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = nameof(Logout.PrefixUserNameText),
Description = "登出组件当前用户登录账号前置文字",
Type = "string",
ValueList = " — ",
DefaultValue = "当前账号"
},
new AttributeItem() {
Name = nameof(Logout.HeaderTemplate),
Description = "账户信息模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(Logout.LinkTemplate),
Description = "导航信息模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
}