webassmbly blazor实现多页签效果

最终效果如上图。

多页签使用BlazorStrap中的BSTabGroup、BSTabList组件，内嵌绑定的BSTab:

<div><NavMenu OnShowLog="ShowLog" OnShowModel="ShowModel" />
</div>
<div class="container"><BSTabGroup ShownEvent="@Shown" @ref="tabGroup"><BSTabList>@foreach (var tabInfo in tabInfoList){<BSTab InitialSelection="@IsTabSelected(tabInfo.Item3.FullName)" Selected="@IsTabSelected(tabInfo.Item3.FullName)" id="@tabInfo.Item3.FullName"><BSTabLabel>@tabInfo.Item1@if (!tabInfo.Item1.Equals("首页")){<span>&nbsp;</span><span class="text-danger" @onclick="@(()=>CloseTab(tabInfo.Item3.FullName))">x</span>}</BSTabLabel><BSTabContent>@tabInfo.Item2</BSTabContent></BSTab>}</BSTabList><BSTabSelectedContent /></BSTabGroup>
</div>

上面第一个div创建主菜单；第二个div声明了多页签。多页签自动遍历tabInfoList中的数据，绘制界面。BSTab没有实现可关闭的效果，因此使用span定义了一个关闭小按钮，点击页签名称后的x，关闭页签。对于首页页签，不提供关闭功能，用@if做了判断。BSTabGroup封装的还是不够到位，控制过程有绑定，有也设置属性的方式。Blazor资料也比较少，开发过程中需要查看代码找解决方法。

private List<Tuple<string, RenderFragment, Type>> tabInfoList = new List<Tuple<string, RenderFragment, Type>>();//初始化的时候，添加首页页签
protected override void OnInitialized(){Storage.SetItem("environment_uri", String.Empty);Storage.SetItem("environment_uri", UriHelper.BaseUri + "api");tabInfoList.Add(new Tuple<string, RenderFragment, Type>("首页", CreateDynamicComponent(typeof(BlazorCrud.Client.Pages.Index)),typeof(BlazorCrud.Client.Pages.Index)));}void ShowModel(Tuple<string, Type> modelInfo){var tabInfo = tabInfoList.FirstOrDefault(t => t.Item3 == modelInfo.Item2);if(tabInfo != null){//找到一打开页签，则激活即可ShowLog($"打开已存在页签  {selectedModel}");tabGroup.Selected = tabGroup.Tabs[tabInfoList.IndexOf(tabInfo)];StateHasChanged();return;}tabInfoList.Add(new Tuple<string, RenderFragment, Type>(modelInfo.Item1, CreateDynamicComponent(modelInfo.Item2), modelInfo.Item2));selectedModel = modelInfo.Item2.FullName;StateHasChanged();}
//基于Blazor的渲染原理，动态创建组件的时候，传递组件的Type，绘制时自动创建组件实例，输出组件的html和css
RenderFragment CreateDynamicComponent(Type type) => builder =>{var seq = 0;builder.OpenComponent(seq, type);builder.CloseComponent();};//关闭页签，这里直接从tabInfoList中删除对应的元素即可，界面会自动刷新void CloseTab(string id){var tab = tabInfoList.FirstOrDefault(t=>t.Item3.FullName.Equals(id));if(tab != null){tabInfoList.Remove(tab);if(tabInfoList.Count > 0){ShowModel(new Tuple<string, Type>(tabInfoList.Last().Item1, tabInfoList.Last().Item3));}}}

blazor中组件间通信机制：子组件定义事件，父组件绑定响应方法。父组件引用子组件时用@ref定义子组件的名字，在代码中声明同名成员，即可得到子组件实例，直接调用子组件中的公共方法。

开发完毕发布到服务器上，需要源码中wwwroot目录、编译后的_framework目录（两者同级），请求后报错，还有一个_content目录，需要在vs调试环境下，启动程序页面，将页面另存为，获取到所有依赖文件，在根据运行错误提示，将依赖文件按要求放入_content的子目录中。即可在非iis服务器上发布成功。如浏览器提示错误，在根据错误提示，调整wwwroot、_framework、_content中文件的位置即可。

查看调试程序运行信息：右下角找到IIS Express小图标，右键，显示应用程序所在位置及url：

vs提供的发布功能：blazor客户端项目，右键，发布，发布到文件夹，即可获取到完整的目录。

webassmbly blazor实现多页签效果相关推荐

利用JQuery插件CleverTabs实现多页签打开效果
在VS中,我们能打开多页签,并在不同的页签之间进行浏览和操作,这一功能通过JQuery插件CleverTabs也能实现此效果.CleverTabs下载请点击这里:JQuery CleverTabs 本 ...
CSS3实现多页签图片缩放切换效果
多页签切换效果,图片缩放,鼠标移动到图片上后显示文字内容等等,效果很集中呐截图如下: 下载地址:http://www.lanrenzhijia.com/js/css3/2012/0718/602.h ...
【vue】html页面怎么设置页签图标？比如B站是个小电视的图标的效果
文章目录 html页面怎么设置页签图标?比如B站是个小电视的图标的效果页签图标是什么? 如何设置页签图标? 实现效果展示: 页签图标去哪找好看的? html页面怎么设置页签图标?比如B站是个小电视的 ...
axure没有团队页签_Axure教程：多页签可滚动的选项卡制作
这就是我下面要分享给大家的内容啦: 首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程. 一.最常见的传统选项卡最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签 ...
android123 zhihuibeijing 新闻中心-新闻页签 ViewPagerIndicator实现
## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成.ViewPager指针项目,在使用ViewPa ...
visual studio 没有属性页_驯龙物语10月14日更新|新增快捷购买页签
更新公告大家好,我是小白龙,很高兴又与大家见面啦!维利克洛大陆又迎来了新内容,守护者们要仔细阅读看到最后喔! 更新时间本次更新于10月14日6:00-7:00进行,视更新进度可能提前开服或顺延,各 ...
界面设计方法 (2) — 3.卡式, 列表, 主细表, 树形, 页签
企业管理类型系统采用的PC端界面形式常见的有5种 (卡式.列表.主细表.树形.页签),以及以这5种形式为基础的组合形式.确定一个业务功能采用什么样的界面形式表达的效果最佳,一般是综合了客户的业务需求. ...
eclipse插件开发(一) 简易4页签编辑器(源码 | 设计 | JS | CSS)
由于在前端编辑html和js还有css都比较繁琐,因此想要在一个页面编辑,所以想开发一个插件来减少这个繁琐 1.本文环境: Eclipse IDE for Enterprise Java Develo ...
HTML 前端设置浏览器页签图标设置
想实现如下效果:修改浏览器页签的图标话不多说上代码 <link rel="shortcut icon" type=& ...

webassmbly blazor实现多页签效果

webassmbly blazor实现多页签效果相关推荐

最新文章

热门文章