最近准备用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. java基础路线与详细知识点

    点击下方打开文件查看 还在持续更新中.....

  2. 将视图批量新增到PowerDesigner中并以model图表的形式展示

    1:需求 数据库中的所有视图大概64个左右,都需要新增到PowerDesigner中,以图表(model)的形式给展示出来,如下: 2:问题点: 由于2020年春节期间病毒的原因,我们需要远程办公,新 ...

  3. 问题：idea 中文无法使用

    1. 问题--idea无法使用中文输入 原因:idea本身版本过高,所以需要你强制减低它的jdk版本 解决:使用配置idea环境变量解决  ps:目前适用于任何版本的jdk和idea 步骤: 1.新建 ...

  4. canal数据同步

    前面提到数据库缓存不一致的几种解决方案,但是在不同的场景下各有利弊,而今天我们使用的canal进行缓存与数据同步的方案是最好的,但是也有一个缺点,就是相对前面几种解决方案会引入阿里巴巴的canal组件 ...

  5. 《Go语言圣经》阅读笔记：第二章程序结构

    第二章 程序结构 2.1 命名 在GO语言中,所有的变量名.函数.常量.类型.语句标号.包名都遵循一个原则: 名字必须以字母或者下划线开头,后面紧跟任意数量的字母数字下划线.区分大小写. 在GO语言中 ...

  6. SNMP协议之序言

    最近两周公司分配一个任务:使用snmp协议做一个网管,来配置我们的产品.这可以说是我第一次听说这个协议,我问了一下周围的同事这是个什么协议,同事说"简单网络管理协议",其实这个协议 ...

  7. SQL-Instead of 触发器

    定义及优点 INSTEAD OF触发器指定执行触发器而不是执行触发 的SQL 语句,从而替代触发语句的操作.        在表或视图上,每个 INSERT.UPDATE 或 DELETE 语句最多可 ...

  8. IIS托管Asp.net Core及Abp VNext

    默认方式安装IIS后,从官方网站下载IIS模块 https://dotnet.microsoft.com/download/dotnet-core/3.1 2个都需要安装 安装后,新建网站指向发布的磁 ...

  9. Identity角色管理三（创建角色）

    首先创建视图模型 using System.ComponentModel; using System.ComponentModel.DataAnnotations; namespace Shop.Vi ...

  10. JS007. 深入探讨带浮点数运算丢失精度问题（二进制的浮点数存储方式）

    复现与概述 当JS在进行浮点数运算时可能产生丢失精度的情况: 从肉眼可见的程度上观察,发生精度丢失的浮点数是没有规律的,但该浮点数丢失精度的问题会100%复现.经查阅,这个问题要追溯至浮点数的二进制存 ...