bh004- Blazor hybrid / Maui 使用 BootstrapBlazor UI 库快速教程

1. 建立工程 bh004_BootstrapBlazorUI

源码

2. 添加 nuget 包

<PackageReference Include="BootstrapBlazor" Version="7.*" />
<PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.*" />

3. 添加样式表文件

wwwroot/index.html

在宿主文件中增加主题样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /><title>bh004_BootstrapBlazorUI</title><base href="/" /><link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet"><link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"><link href="_content/BootstrapBlazor/css/motronic.min.css" rel="stylesheet"><link href="css/app.css" rel="stylesheet" /><link href="bh004_BootstrapBlazorUI.styles.css" rel="stylesheet" />
</head><body><div class="status-bar-safe-area"></div><div id="app">Loading...</div><div id="blazor-error-ui">An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss"><i class="fa-solid fa-xmark"></i></a></div><script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script><script src="_framework/blazor.webview.js" autostart="false"></script></body></html>

4. 注册 BootstrapBlazor 服务

MauiProgram.cs

using bh004_BootstrapBlazorUI.Data;
using Microsoft.Extensions.Logging;namespace bh004_BootstrapBlazorUI
{public static class MauiProgram{public static MauiApp CreateMauiApp(){var builder = MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");});builder.Services.AddMauiBlazorWebView();// CodeCommentbuilder.Services.AddBootstrapBlazor();
#if DEBUGbuilder.Services.AddBlazorWebViewDeveloperTools();builder.Logging.AddDebug();
#endifbuilder.Services.AddSingleton<WeatherForecastService>();return builder.Build();}}
}

5. 增加命名空间引用

_Imports.razor

@using BootstrapBlazor.Components

6. 增加 BootstrapBlazorRoot 组件

Main.razor

<BootstrapBlazorRoot><Router AppAssembly="@typeof(Main).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /><FocusOnNavigate RouteData="@routeData" Selector="h1" /></Found><NotFound><LayoutView Layout="@typeof(MainLayout)"><p role="alert">Sorry, there's nothing at this address.</p></LayoutView></NotFound></Router>
</BootstrapBlazorRoot>

7. 在页面中增加一个 Button 按钮

Pages\Index.razor

<Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="测试" />

8. 运行

9. 相关资料

如何远程调试 MAUI blazor / Blazor Hybrid
https://www.cnblogs.com/densen2014/p/16988516.html

BootstrapBlazor 官网教程
https://www.blazor.zone/install-maui

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/56722.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图

Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图 作者:安静到无声 个人主页 目录 Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图实验结果推荐专栏在Python中,我们可以使用pyecharts库来绘制各种图表,如柱状图、折线图、饼图等。最近,我在学习如何使用pyec…

【Go 基础篇】Go语言获取用户终端输入:实现交互式程序的关键一步

介绍 在许多编程场景中&#xff0c;我们需要编写交互式程序&#xff0c;以便用户可以在终端中输入数据并与程序进行交互。Go语言提供了丰富的方式来获取用户终端输入&#xff0c;使得编写交互式程序变得简单而有趣。本篇博客将深入探讨Go语言中获取用户终端输入的各种方法&…

精准营销的三种打法:社群圈层、人群包、跨屏联动

数据时代的来临&#xff0c;使营销变得有迹可寻&#xff0c;不再只是广撒网&#xff0c;只求愿者上钩&#xff0c;而是更注重精准营销。 若想制定优质的数字营销方案&#xff0c;就要懂得如何与数据打交道&#xff0c;知道抓取哪些数据。众引传播在数据抓取时较为关注两类数据…

adb command

查看屏幕分辨率 adb shell wm size 查看dpi adb shell dumpsys window | grep ‘dpi’ WIFI调试&#xff1a; adb tcpip 5555adb connect 设备ip 注意&#xff0c;USB拔插会断掉&#xff0c;所以插上USB后再 adb connect 设备ip。【注意】华为手机自建热点的ip一般是192.1…

Unity3D Pico VR 手势识别 二

Unity3D Pico VR 手势识别_Cool-浩的博客-CSDN博客 此篇主要讲解怎么手势追踪&#xff0c;手势姿态自定义预制识别&#xff0c;不会导入SDK和配置环境的请看上一章节 环境要求 SDK 版本&#xff1a;2.3.0 及以上PICO 设备型号&#xff1a;PICO Neo3 和 PICO 4 系列PICO 设备系…

【大模型AIGC系列课程 2-2】大语言模型的“第二大脑”

1. 大型语言模型的不足之处 很多人使用OpenAI提供的GPT系列模型时都反馈效果不佳。其中一个主要问题是它无法回答一些简单的问题。 ● 可控性:当我们用中文问AI一些关于事实的问题时,它很容易编造虚假答案。 ● 实时性:而当你询问它最近发生的新闻事件时,它会干脆地告诉你…

unity中Game视图绘制XYZ坐标轴

Game视图显示XYZ坐标轴 功能一&#xff1a;仅显示XYZ坐标轴前期准备设置箭头模型的材质1、在“Assets”中&#xff0c;新建一个名为“Materials”文件夹&#xff0c;专门用于放置材质。选中“Materials”文件夹&#xff0c;鼠标右键->“创建”->“材质”2、重命名为“Red…

聊聊mybatis-plus的sql加载顺序

序 本文主要研究一下如果mybatis mapper定义了多个同名方法会不会有问题 MybatisConfiguration com/baomidou/mybatisplus/core/MybatisConfiguration.java /*** MybatisPlus 加载 SQL 顺序&#xff1a;* <p> 1、加载 XML中的 SQL </p>* <p> 2、加载 SqlP…

【业务功能篇85】微服务-springcloud-Nginx-反向代理-网关

Nginx域名 1.hosts文件 在c:/window/system32/drivers/etc/hosts文件&#xff0c;我们在这个文件中添加 192.168.56.100 msb.mall.com注意如果是没有操作权限&#xff0c;那么点击该文件右击属性&#xff0c;去掉只读属性即可 通过这个域名访问到Nginx服务 2.Nginx的方向代…

centos8.5安装docker实战

1、Docker安装之前需要执行如下命令&#xff1a; [rootlocalhost ~]# yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm [rootlocalhost ~]# yum install -y yum-utils device-mapper-persistent-d…

FFI绕过disable_functions

文章目录 FFI绕过disable_functions[RCTF 2019]NextphpPHP7.4 FFI参考 FFI绕过disable_functions [RCTF 2019]Nextphp 首先来看这道题目 index.php <?php if (isset($_GET[a])) {eval($_GET[a]); } else {show_source(__FILE__); }查看一下phpinfo 发现过滤了很多函数&…

Linux环境下SVN服务器的搭建与公网访问:使用cpolar端口映射的实现方法

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

PostgreSQL SQL优化

PostgreSQL SQL优化 一、在字段里面写的子查询放到from后面&#xff0c;用left join&#xff0c;会大幅提高SQL查询速度。 一、在字段里面写的子查询放到from后面&#xff0c;用left join&#xff0c;会大幅提高SQL查询速度。

智慧工厂解决方案:推动制造业转型升级的新引擎

随着信息技术的迅猛发展和制造业竞争的加剧&#xff0c;智慧工厂成为了推动制造业转型升级的重要引擎。智慧工厂解决方案通过整合物联网、人工智能、大数据分析等先进技术&#xff0c;实现生产过程的智能化、自动化和高效化&#xff0c;为企业提供了更加灵活、智能的生产模式和…

stm32duino 文件结构分析

GitHub - stm32duino/Arduino_Core_STM32: STM32 core support for Arduino 与arduino 相关的主要涉及 library 与 corel/arduino corel/arduino 内的analogWrite analogRead 使用 digital_write() ;内部主要使用 pwm_start(),adc_xxx_() &#xff08;定义所在地址为 Libra…

面试常问:水平居中和垂直居中的方法

水平居中 文本居中 如果元素为行内元素&#xff0c;可以将父元素的text-align属性设置为center&#xff0c;这样子元素就会水平居中对齐 .text{text-align: center; }固定宽度的居中 如果元素宽度已知并固定&#xff0c;可以通过将左右margin设置为auto来实现水平居中。 .…

list【1】介绍与使用(超详解哦)

list的介绍与使用 引言list介绍接口使用默认成员函数迭代器容量元素访问数据修改 list的算法接口总结 引言 继vector之后&#xff0c;我们继续来介绍STL容器&#xff1a;list 对于容器的使用其实有着类似的模式&#xff0c;参考之前vector的使用可以让我们更快的上手&#xff…

【MySQL】2、MySQL数据库的管理

常用 describe user; Field:字段名称 Type:数据类型 Null :是否允许为空 Key :主键 Type:数据类型 Null :是否允许为空key :主键 Default :默认值 Extra :扩展属性&#xff0c;例如:标志符列&#xff08;标识了种子&#xff0c;增量/步长&#xff09;1 2 id&#xff1a;1 3 5 …

Android Jetpack组件的全方位分析

Jetpack是一个用于简化Android应用程序开发的工具包&#xff0c;包含了一系列的组件和工具。Jetpack包含了很多组件&#xff0c;如LiveData、ViewModel、Room、Data Binding、Navigation等。 Jetpack组件是一种更高级别的抽象&#xff0c;它们可以提供更简洁、更易于使用的API。…

self instruct 介绍

《SELF-INSTRUCT: Aligning Language Model with Self Generated Instructions》 github: self-instruct 背景 大模型表现惊人&#xff0c;但是严重依赖于人工编写的指令数据。然而&#xff0c;依靠人工标注数据成本高昂。本文中提出self-instruct框架&#xff1a;一种基于大…