首页 > 其他分享 >XAF Blazor FilterPanel 布局样式

XAF Blazor FilterPanel 布局样式

时间:2022-11-27 15:12:17浏览次数:38  
标签:布局 样式 FilterPanel 滚动条 Blazor XAF

从上一篇关于ListView布局样式的文章中,我们知道XAFBlazor是移动优先的,如果想在PC端有更好的用户体验,我们需要对布局样式进行修改。这篇介绍在之前文章中提到的FilterPanel,它的样式调整稍微要复杂一些,但思路与之前的差不多。

当过滤项过多时,FilterPanel会变高,超出了容器的高度后,整个容器会出现滚动条,如下图

image

我们需要的是过滤项多时,在DxTreeView内部出现滚动条,如下图

image

由于DxTreeView并不支持这个功能,我们需要修改其内部布局样式,下面是修改演示

image

下面是Blazor组件中的DOM结构

image

下面是样式代码

image

标签:布局,样式,FilterPanel,滚动条,Blazor,XAF
From: https://www.cnblogs.com/haoxj/p/16929583.html

相关文章

  • XAF Blazor ListView布局样式
    前言XAFBlazor虽然可以适应PC端及移动端,但从它的界面可以看出,它明显是移动优先的(MobileFirst)。这样的界面在PC端有时会感觉不是很方便(特别对于数据密集的系统来说),即将发......
  • XAF Blazor FilterPanel
    前言XAF列表视图(ListView)中的过滤(Filter),可以在ListView模型的Filters节点中添加,添加的过滤项(FilterItem)会在列表视图的工具栏中以下拉列表的形式显示,WinForm与Blazor是一......
  • Blazor和Vue对比学习(进阶2.2.5):状态管理之持久化保存(3),LocalStorage和IndexedDB
    PS1:点击查看Blazor中C#和JS互操作PS2:Vue中,可以直接使用LocalStorage和IndexedDB对象,本章节案例主要以Blazor的使用为主 一、Storage对象1、浏览器内置的键值对存储。l......
  • XAF Blazor 中使用 Blazor 组件
    前言文档标题是不是感觉有点奇怪,但实际我们在XAFBlazor中使用Blazor组件是很繁琐的,我们需要将Blazor组件封装成属性编辑器(PropertyEditor),再用非持久化对象去承载它。当我......
  • XAF Blazor TabbedMdi
    本文中的BlazorTabbedMdi是有偿的,感兴趣的可以加我QQ(120679402)前言XAF在WinForm中采用了多文档界面(MDI),但在Blazor中却没有,在官网中也有人提相关的问题,官方的回复是将来......
  • 学习ASP.NET Core Blazor编程系列十——路由(下)
    学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二——第一个Blazor应用程序(上)学习ASP.NETCoreBlazor编程系列二——第一个Blazor应......
  • MAUI / MAUI Blazor 环境路径测试笔记
    测试代码Tools服务类多平台实现MAUIpublicstringCacheDirectory()=>FileSystem.CacheDirectory;publicstringAppDataDirectory()=>FileSystem.AppDataDirecto......
  • BlazorServer[Object reference not set to an instance of an object.] at Microsoft
       看了反汇编感觉应该是路由出了问题。仔细看了发现了问题(只是没想到会导致运行后才蹦。。。你倒是可以先提醒下的,搞得很崩溃) 错误原因:Razor页面中的page属性存......
  • blazor调试部署全过程
    安装了最新的dotnetSDK最好直接下载安装版,不要zip版,安装版会自动注册一些信息,省去后面的很多麻烦.设置如下OS环境变量,并重启计算机.(1)将dotnet.exe路径加......
  • 学习ASP.NET Core Blazor编程系列文章之目录
    学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二——第一个Blazor应用程序(上)学习ASP.NETCoreBlazor编程系列二——第一个Blazor应......