BootstrapBlazor 模板适配移动设备使用笔记
项目模板
Bootstrap Blazor App 模板
为了方便大家利用这套组件快速搭建项目,作者制作了 项目模板(Project Templates),使用 dotnet new 命令行模式,使用步骤如下:
- 安装项目模板
dotnet new install Bootstrap.Blazor.Templates::8.0.1
- 创建工程
dotnet new bbapp
- 官网教程
https://www.blazor.zone/template
使用最新模板,以下基本都是修改 MainLayout.razor 文件
- Layout 组件菜单按钮移动设备提示在移动设备不是很有必要,取消显示
<Layout ... TooltipText="" >
- Drawer 组件移动设备下错开行
<DropdownWidget class="px-3">
改为
<DropdownWidget>
- Drawer 组件默认提示清空
<DropdownWidgetItem ... BadgeNumber="">
- Logout 显示登录信息
<Logout ImageUrl="images/avatars/150-13.jpg" DisplayName="@context.User.Identity?.Name" UserName="@context.User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)?.Value" PrefixUserNameText="@($"({context.User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Role)?.Value})")" >
- layout-drawer 移动到个人中心里
<Logout ... >
<LinkTemplate>
<a href="https://sso.app1.es/Identity/Account/Manage"><i class="fa-solid fa-suitcase"></i>个人中心</a>
<a href="#" @onclick="@(e => IsOpen = !IsOpen)"><i class="fa-solid fa-cog"></i>设置</a>
<a href="#"><i class="fa-solid fa-bell"></i>通知<span class="badge badge-pill badge-success"></span></a>
<LogoutLink Url="@($"{LogoutUrl}=/")" />
</LinkTemplate>
</Logout>
@*<div class="layout-drawer" @onclick="@(e => IsOpen = !IsOpen)"><i class="fa fa-gears"></i></div>*@
- 授权以及强制登录
MainLayout.razor
<BootstrapBlazorRoot>
<AuthorizeView>
<Authorized>
,,,
</Authorized>
<NotAuthorized>
@{
Navigation.NavigateTo($"{LoginUrl}=/", forceLoad: true);
}
</NotAuthorized>
</AuthorizeView>
</BootstrapBlazorRoot>
完成效果
补充
- net8 webapp Auto 工程不能用 ReconnectorOutlet 组件, 会变成纯SSR
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/18012255
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub