最近准备用Blazor Webassembly做后台开发要用到多标签页,找了半天发现绝大多数都是Blazor Server的多标签没有Webassembly.没办法只能自己想办法造轮子了.

查了许多资料最后还是决定用iframe来实现,不过标签切换等逻辑是用c#代码实现的.

基本功能已经都实现了不论是标签滚动、激活、左移、右移、关闭其他，还是在内容页跳转、新增、关闭标签都有实现。

已经可以用来做实际项目

源码地址: https://github.com/liningit/BlazorWebassemblyMultiPagesTab

其中NavMenu.razor中的部分代码是为了测试多标签滚动而增加的,可自己手动改下

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

Blazor Webassembly多标签页开发的更多相关文章

  1. Blazor Webassembly多标签页实现非iframe的实现

    前面用iframe实现了多标签页,这次是不用iframe实现的多标签页.参考了一下Ant Design Blazor. 基本功能已经都实现了不论是标签滚动.激活.左移.右移.关闭其他,还是在内容页跳转 ...

  2. 一起学Blazor WebAssembly 开发（1）

    最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...

  3. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  4. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  5. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  6. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  7. 浏览器中的 .Net Core —— Blazor WebAssembly 初体验

    前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...

  8. Blazor WebAssembly 3.2 正式发布

    5月 20日,微软 发布了 Blazor WebAssembly 3.2(https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0- ...

  9. [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

    前言, Blazor Assembly 需要最少 1.9M 的下载量.  ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多,  ...

随机推荐

  1. ABC类IP地址

    A类IP地址一个A类IP地址由1字节的网络地址和3字节主机地址组成,网络地址的最高位 必须是"0", 地址范围从1.0.0.0 到126.0.0.0.可用的A类网络有126个,每个 ...

  2. mac下用clion进行sdl2游戏开发de环境搭建

    1. 故事背景 想从unity转unreal了,于是要使用c++进行开发.unreal引擎那么大,每次打开,我的小本都嗡嗡嗡的,想着不如用个轻量一些的引擎先开发吧,核心代码独立出来,到时候如果真要移植 ...

  3. call bind apply的区别

    call() 和apply()的第一个参数相同,就是指定的对象.这个对象就是该函数的执行上下文. call()和apply()的区别就在于,两者之间的参数. call()在第一个参数之后的 后续所有参 ...

  4. Final Cut Pro X 10.4.7 修改长宽比, 截取某一段视频导出

    新建项目时设置过长宽比例,现在要修改 窗口 - 项目属性 - 修改 - 自定义 要注意的是,导出时也要选择一下比例 截取某一段视频导出 将鼠标移到你要截取的片段的开始处,点击快捷键 i(标记-设定范围 ...

  5. SQL语句之基本使用

    1.sql语法 一些重要的SQL命令: SELECT - 从数据库中提取数据 UPDATE - 更新数据库中的数据 DELETE - 从数据库中删除数据 INSERT INTO - 向数据库中插入新数 ...

  6. Linux串口调试详解

    测试平台 宿主机平台:Ubuntu 16.04.6 目标机:iMX6ULL 目标机内核:Linux 4.1.15 目标机添加串口设备 一般嵌入式主板的默认镜像可能只配置了调试串口,并用于 consol ...

  7. 使用Eclipse对weblogic进行远程调试

    一.环境说明 weblogic12c,linux centOS 6.5,eclipse mars. 二.步骤 1.找到weblogic根目录下user_projects/domains/域名/bin/ ...

  8. 使用@EnableConfigurationProperties注册配置Bean时的命名规则

    Spring和Spring Boot开发中,常使用@ConfigurationProperties注解某个类,使其实例接受一组具有相同前缀的配置项. 可以使用@Component或Java Confi ...

  9. elementUI 表格 table 的表头错乱问题

    页面中多组件开发时,如果页面中有表格的,table表格头出现表头错乱 // 全局设置1 body .el-table th.gutter{ 2 display: table-cell!importan ...

  10. logstash-input-jdbc配置说明

    Logstash由三个组件构造成,分别是input.filter以及output.我们可以吧Logstash三个组件的工作流理解为:input收集数据,filter处理数据,output输出数据.至于 ...