Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)

树立导弹人

最近组件库更新比较频繁,有些同学感觉有点迷茫,就着今天刚上了张老板一节课立马撸个新的上手教程回馈社区,  ;->
1.新建工程b18QuickStartv757,将项目添加到解决方案中

1. dotnet new blazorserver -o b18QuickStartv757
2. dotnet sln add b18QuickStartv757/b18QuickStartv757.csproj

复制代码

2.使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..

1. dotnet add b18QuickStartv757 package BootstrapBlazor
2. dotnet add b18QuickStartv757 package BootstrapBlazor.FontAwesome

复制代码

2.样式表和Javascript 引用

增加主题样式表到 Pages/_Host.cshtml 文件中
删除
并在下面添加两行

1. [/code]添加 Javascript 引用到 Pages/_Host.cshtml 文件中
2. 在  之前添加
3. [code]

复制代码

3.添加增加命名空间引用到 _Imports.razor 文件中

1. @using BootstrapBlazor.Components

复制代码

4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中

1. <BootstrapBlazorRoot>
2.     <Router AppAssembly="@typeof(App).Assembly">
3.         ...
4.     </Router>
5. </BootstrapBlazorRoot>

复制代码

5.添加BootstrapBlazor服务到 Program.cs 文件中

在 builder.Services.AddSingleton(); 后加入

1. builder.Services.AddBootstrapBlazor();

复制代码

以下步骤纯属个人喜好 , 改造原版 NavMenu 组件

6. 新建 menu.js 文件

在 wwwroot 建立 modules文件夹, 新建 menu.js 文件

1. import Data from "../_content/BootstrapBlazor/modules/data.js";
2. import EventHandler from "../_content/BootstrapBlazor/modules/event-handler.js";
4. export function init(id) {
5.     var el = document.getElementById(id)
6.     if (el === null) {
7.         return
8.     }
9.     const navbar = el.querySelector('.navbar-toggler')
10.     const menu = el.querySelector('.sidebar-content')
11.     const nav = { navbar, menu }
12.     Data.set(id, nav)
14.     EventHandler.on(navbar, 'click', () => {
15.         menu.classList.toggle('show')
16.     })
17.     EventHandler.on(menu, 'click', '.nav-link', e => {
18.         const link = e.delegateTarget
19.         const url = link.getAttribute('href');
20.         if (url !== '#') {
21.             menu.classList.remove('show')
22.         }
23.     })
24. }
26. export function dispose(id) {
27.     const nav = Data.get(id)
28.     if (nav) {
29.         EventHandler.off(nav.navbar, 'click');
30.         EventHandler.off(nav.menu, 'click', '.nav-link');
31.     }
32. }

复制代码

7. 替换 Shared\NavMenu.razor 文件

1. @inherits BootstrapModuleComponentBase
2. @attribute [JSModuleAutoLoader("./modules/menu.js", Relative = false)]
5.    
6.         <a  target="_blank" href="https://www.cnblogs.com/">Demo</a>
7.         <button  aria-label="toggle">
8.             
9.         </button>
10.    
12.    
13.         
14.             <Menu Items="@Menus" IsVertical="true" IsAccordion="true" IsExpandAll="true" />
15.         
16.    

复制代码

8. 新建 Shared\NavMenu.razor.cs 文件

1. using BootstrapBlazor.Components;
2. using Microsoft.AspNetCore.Components.Routing;
4. namespace b18QuickStartv757.Shared;
6. public partial class NavMenu
7. {
8.     private IEnumerable<MenuItem> Menus { get; set; } = new List<MenuItem>
9.     {
10.             new MenuItem() { Text = "首页", Url = "/"  , Match = NavLinkMatch.All},
11.             new MenuItem() { Text = "Counter", Url = "/counter" },
12.             new MenuItem() { Text = "Fetch data", Url = "/fetchdata" },
13.             new MenuItem() { Text = "工具" ,Items= new List<MenuItem>
14.                 {
15.                     new MenuItem() { Text = "Counter", Url = "/counter" },
16.                     new MenuItem() { Text = "Fetch data", Url = "/fetchdata" },
17.                }
18.             },
19.     };
20. }

复制代码

9. 替换 Shared\MainLayout.razor 文件

1. @inherits LayoutComponentBase
2. @using System.Reflection
4. <section >
5.    
6.         
7.             DEMO
8.         
9.         <NavMenu />
10.    
11.    
12.         
13.             <Tab ClickTabToNavigation="true"
14.                  ShowExtendButtons="true"
15.                  ShowClose="true"
16.                  Body=@Body />
17.         
18.    
19. </section>

复制代码

10. 替换 Shared\MainLayout.razor.css 文件

1. .layout-main .main {
2.     background: rgba(16, 142, 233, 1);
3.     color: #fff;
4.     min-height: 120px;
5.     width: 100%;
6.     height: 100%;
7.     display: flex;
8.     align-items: center;
9.     justify-content: center;
10.     flex-flow: column;
11. }
13. .main {
14.     flex: 1;
15. }
17. .sidebar .navbar-brand {
18.     font-size: 1.1rem;
19. }
21. .sidebar .nav-item {
22.     font-size: 0.875rem;
23.     padding-left: 6px;
24. }
26.     .sidebar .nav-item a {
27.         color: #444;
28.         border-radius: var(--bs-border-radius);
29.         display: flex;
30.         align-items: center;
31.         padding: .25rem 1.5rem;
32.         font-weight: 400;
33.     }
35. .sidebar .navbar {
36.     --bb-bg-navbar: #8548ff;
37.     background-color: var(--bb-bg-navbar);
38. }
40. .sidebar .sidebar-title {
41.     display: none;
42. }
44. .sidebar-text {
45.     font-weight: 700;
46. }
48. .menu .nav-link.nav-table {
49.     color: var(--bs-info);
50.     font-weight: bold;
51. }
53.     .menu .nav-link.nav-table:hover {
54.         color: unset;
55.     }
57. @media (max-width: 767.98px) {
58.     .main .top-row:not(.auth) {
59.         display: none;
60.     }
62.     .main .top-row.auth {
63.         justify-content: space-between;
64.     }
66.     .main .top-row a, .main .top-row .btn-link {
67.         margin-left: 0;
68.     }
69. }
71. @media (min-width: 768px) {
72.     .section {
73.         flex-direction: row;
74.         display: flex;
75.     }
77.     .sidebar {
78.         width: var(--bs-sidebar-width);
79.         height: calc(100vh);
80.         position: sticky;
81.         top: 0;
82.         border-right: solid 1px #c0c4cc;
83.         background-color: #f0f0f0;
84.         display: flex;
85.         flex-direction: column;
86.         margin-top: calc(var(--bs-header-height)*-1);
87.     }
89.         .sidebar .sidebar-content {
90.             height: calc(100vh - var(--bs-header-height));
91.         }
93.             .sidebar .sidebar-content.collapse {
94.                 display: flex;
95.                 flex-direction: column;
96.             }
98.         .sidebar .sidebar-title {
99.             height: 50px;
100.             display: flex;
101.             align-items: center;
102.             padding: 1rem;
103.             border-bottom: solid 1px #c0c4cc;
104.         }
106.         .sidebar .scroll {
107.             overflow-x: hidden;
108.             max-height: calc(100% - 36px);
109.             padding: 5px 0;
110.         }
112.             .sidebar .scroll .menu {
113.                 width: var(--bs-sidebar-width);
114.             }
115. }

复制代码

11. Index.razor 在@page下一行添加 attribute

1. @attribute [TabItemOption(Text = "Index")]

复制代码

12. 运行

来源:https://www.cnblogs.com/densen2014/archive/2023/04/27/17357815.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！