Blazor Webassembly多标签页开发

最新推荐文章于 2022-12-26 11:29:59 发布
置顶 最新推荐文章于 2022-12-26 11:29:59 发布
阅读量297 收藏
点赞数 1
分类专栏： .NET 文章标签： .net Blazor Webassembly
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4610a/article/details/120706711
版权

最近准备用Blazor Webassembly做后台开发要用到多标签页，找了半天发现绝大多数都是Blazor Server的多标签没有Webassembly。没办法只能自己想办法造轮子了。
查了许多资料最后还是决定用iframe来实现，不过标签切换等逻辑是用c#代码实现的。
基本功能已经都实现了不论是标签滚动、激活、左移、右移、关闭其他，还是在内容页跳转、新增、关闭标签都有实现。
已经可以用来做实际项目
源码地址: https://github.com/liningit/BlazorWebassemblyMultiPagesTab
其中NavMenu.razor中的部分代码是为了测试多标签滚动而增加的，可自己手动改下

github中的第二条提交记录就是在原项目上的修改可以看下改了哪些东西

随风忘记
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Bootstrap的多标签页设计源码
04-12
本Bootstrap多标签页设计源码包含102个文件，主要使用CSS、HTML和JavaScript编写。它允许用户增加、关闭和折叠标签页，提供了智能、快速搭建和多种样式选择。适用于各种Web应用程序，易于集成和定制。
webassmbly blazor实现多页签效果
henreash的专栏
09-11 1768
最终效果如上图。 多页签使用BlazorStrap中的BSTabGroup、BSTabList组件，内嵌绑定的BSTab: <div> <NavMenu OnShowLog="ShowLog" OnShowModel="ShowModel" /> </div> <div class="container"> <BSTabGroup ShownEvent="@Shown" @ref="tabGroup"> &..
bs前端设计--多页签界面
henreash的专栏
12-03 6721
在大型的bs系统开发中，界面通常组织成MDI的形式，fineui、jquery miniui等框架都完美的实现了，如果不想引入这些大的类库，需要自己实现或下载特定的插件。网上可以下载到一个clevertabs jquery插件库，但只支持jquery1.6和jquery ui1.8，对高版本jquery支持的不好。网上搜索了一下，有基于bootstrap的实现，而且对兼容高版本jquery。下载后
[html5技术]基于bootstrap制作的多标签页(tabs)#1024程序员福音来了
程序猿开发日志【学习永无止境】
10-24 8965
下载地址 点击下载 效果图 default/默认 (带有向左、向右移动以及选项菜单) 参考Demo: nav-tabs and nav-pills  classic/折叠 (折叠隐藏tab)   作用与优势 通过简单的配置，生成可智能适配ajax和iframe的多标签页。 可以直接套用bootstrap的各种模板样式。 在不关闭窗口的情况下，直接刷新页面能保留所有标签页...
学习.NET MAUI Blazor（四）、路由
What If...
12-26 2102
Web应用主要是使用a标签或者是服务端redirect来跳转。而现在流行的单页应用程序 (SPA) ，则通过路由（Router）来实现跳转，如Vue 、React等。在.NET MAUI Blazor应用中，路由是遵循Blazor的路由规则。也是通过路由组件(Router)实现的
jQuery多个标签页面打开代码
06-24
jQuery多个标签页面打开代码是一款使用标签页打开页面模式，允许多开。
jQuery点击打开多个标签页代码
06-24
jQuery点击打开多个标签页代码是一款点击菜单的时候打开多个标签选项卡代码。
CEF3 实现多标签页
10-13
CEF3 实现多标签页，简单实现网页版标签功能，超过一定长度标签时按左右箭头能实现标签切换
Vue + Elementui实现多标签页共存的方法
10-16
主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
BlazorGrpc:Blazor WebAssembly + gRPC示例
03-09
更新：该项目已存档，因为grpc-web直接内置了此功能 Blazor WebAssembly + ASP.NET Core + gRPC 此示例项目演示了如何使用Blazor，ASP.NET Core和gRPC的功能来创建Web应用程序，该应用程序可以与使用gRPC的后端进行通信，并具有最大的代码可重用性。 通过简单地通过.proto文件定义我们的API合同， .proto后端和前端（Blazor）创建请求/响应对象。 此外，代码生成会创建我们实现服务所需的gRPC客户端和gRPC服务器。 这意味着您的客户端和服务器代码可以轻松保持同步。 专案 BlazorGrpc.Protos 包含项目中使用的.proto定义 BlazorGrpc.WeatherService 简单的gRPC服务，可返回虚拟天气数据 BlazorGrpc.Api 充当gRPC网关（支持一元gRPC调用）。
JavaScript 组件之旅（三）：用 Ant 构建组件
10-29
我们走到哪儿了？前两期思考了太多东西，你是否已有倦意？别担心，本期的话题很轻松，你只需要简单了解一些语法，写几行配置，就能驱使系统按你预设的方式自动完成一些工作。
Ant Design Blazor 组件库的路由复用多标签页介绍
dotNET跨平台
07-09 1081
前言Blazor 是 .NET 最新的前端框架，可以基于 WebAssembly 或 SignalR （WebSocket）构建前端应用程序，基于 WebAssembly 托管模型的 Bl...
.Net Chart手动设X/Y轴坐标
A4610A的专栏
12-29 6282
Chart1.ChartAreas["ChartArea1"].AxisY.Maximum = 1;//设置Y轴最大值 Chart1.ChartAreas["ChartArea1"].AxisY.Minimum = 0;是在Y轴最小值 Chart1.ChartAreas["ChartArea1"].AxisY.Interval = 1;//设置每个刻度的跨度
TransactionScope之隐形事务
A4610A的专栏
02-23 2344
TransactionScope 类提供了一种简单方法，使您无需与事务自身进行交互，就可以在参与事务时对代码块进行标记。事务范围可以自动选择和管理环境事务。由于 TransactionScope 具有简单易用性和高效性，因此建议您在开发事务应用程序时使用该类。 此外，还无需将资源显式登记到事务。任何 System.Transactions 资源管理器（如 SQL Server 2005）都可以
SAP SAP读取 快速读取SAP里返回的数据
A4610A的专栏
03-22 1420
当sap里返回数据比较多时如果通过value(行,列)返回会很慢(20来万会用一两个小时),这时可以用returnMessTable_SO.Data获得一个二维数组然后再取二维数组里面的数据,下面就是例子: 以前一二十万数据需要用好几个小时,而用这种方法只需几分钟就可以了   Dim functionCtrl As Object sap function
基于Dapper的开源LINQ扩展,且支持分库分表自动生成实体
A4610A的专栏
07-07 814
LnskyDB是基于Dapper的LINQ扩展,支持按时间分库分表,也可以自定义分库分表方法.而且可以T4生成实体类免去手写实体类的烦恼. 文档地址: https://liningit.github.io/LnskyDB/ 开源地址: https://github.com/liningit/LnskyDB
vs插件打开文件方法
A4610A的专栏
11-23 789
用方法   _applicationObject.ItemOperations.OpenFile(f.Directory.FullName + @"\Js\PageJavaScript\" + strTemp + ".js", Constants.vsViewKindCode); 如果用 _applicationObject.Documents.Open的话则在打开后关闭时报异常,只能重新启动v
对比两个数据库表结构
A4610A的专栏
08-31 618
在项目做好后实施了以后,可能因为需求等原因需要升级, 这时候一般都是在测试系统改好后在更新到正式系统. 存储过程,视图等可以直接通过全部删除在创建进行更新,但是表因为正式系统里已有数据所以无法通过该方式进行更新.只能更改表结构,而这时有可能因为更改的表结构比较多,而出现有的表忘了更新. 该程序可以对比两个数据库下所有表的表结构的不同.并显示.这样就可以找出要更改的正式系统同测试系统表结构
gradio 多标签页
最新发布
07-28
您可以使用 Gradio 来创建具有多个标签页的界面。下面是一个简单示例： ```python import gradio as gr def page1(): return "这是第一页" def page2(): return "这是第二页" def page3(): return "这是第三页" iface = gr.Interface([page1, page2, page3], "tabs") iface.launch() ``` 在这个示例中，我们定义了三个函数 `page1()`、`page2()` 和 `page3()`，分别返回不同的内容。然后，我们创建了一个 `gr.Interface` 对象，并将这三个函数作为参数传递给它。最后，我们指定界面类型为 `"tabs"`，这样就创建了一个具有多个标签页的界面。 您可以根据自己的需求定义不同的函数和内容，并将它们作为参数传递给 `gr.Interface` 对象，以创建包含多个标签页的界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值