打开masa blazor的正确姿势5:插槽-编程思维

依照Vuetify的习惯,MASABlazor将RenderFragment称为插槽。RenderFragment是Blazor的一个难点,而MASA Blazor是二次开发的组件库,大量使用到插槽,所以有必要掌握这个功能。注:在Blazor中,一般将RenderFragment称为模板。   一、插槽RenderFragment的定义和使用 组件式开发模式,带来了复用、灵活、性能等优势,但

打开masa blazor的正确姿势4.1:母版页布局-编程思维

MASA Blazorr提供了丰富的组件及其控制属性,用于母版页布局(MainLayout.razor)。这些组件包括MApp、MMain、MSystemBar、MAppBar、MNavigationDrawer、MFooter和MBottomNavigation。   一、MApp和MMain组件 1、概述 MApp是默认母版MainLayout的根组件,其它布局组件都是MApp的子组件

打开masa blazor的正确姿势4.3:grid网格布局-编程思维

Grid网格布局,借鉴了Bootstrap,以Flex弹性布局为基础,使用 组件方式,让我们以更加简单直接的行列方式,进行灵活布局,是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局,上手Grid也会很快。 一、Grid网格布局的相关组件 1、MContainer(组织容器) MRow的容器。作用是把多个MRow组织起来。虽然叫Container,但并不是Fl

打开masa blazor的正确姿势1:目录&masa blazor是???-编程思维

一、MASA Blazor??? 1、前端技术那么多,为什么选Blazor? 嗯?!~ 未来:Blazor将能够融合服务端渲染、SPA、WebAssembly、跨平台开发的多方优势(Blazor United)。目前布局方向太多、想要得太多,所以感觉哪个方向都不得劲。 现实:如果就想蹲在.NET框架里,Blazor是最好、也是唯一选择。它简单(比Vue还简单),它趋于稳定(发布三四年),它还

打开masa blazor的正确姿势2:组件总览-编程思维

官网文档按拼音罗列组件,且部分嵌套组件没有在导航栏内列出,不利于浏览查阅。本篇文章的主要目的,主要是对所有组件按大家习惯的方式进行分类,简要介绍组件,并建立跳转官方文档的链接。   一、导航布局类 1、MApp母版页布局: MApp:根组件 MMain:主体内容 MSystemBar:顶部①,优先级高于MAppBar。作为母版样使用时,需要加App属性 MAppBar:顶部②,优先级低于

打开masa blazor的正确姿势3.2:响应式-编程思维

一、响应式显示的本质 无论是在框架层次,如Blazor、Vue、React,还是在组件层次,如MASA Blazor、BootStrap、Bootstrap Blazor、ElementUI、AntDesign,尽管在开发环节有诸多差异,但在浏览器的运行环节,只要没有脱离Web,都是被编译为HTML、CSS和JS(WebAssemble是个变数)。所以,它们的任何特性,都必须依赖于HTML、CS

打开masa blazor的正确姿势3.3:组件样式-编程思维

一、关于组件样式的理解 1、框架和组件 前面我们已经说过,现代前端技术,无论是在框架层面(Blazor、Vue、React等),还是组件层面(Bootstrap、MASA Blazor、ElementUI、AntDesign等),本质上都是对HTML、CSS和JS的组合和封装。框架层面,主要解决HTML和JS的问题;而组件层面,在框架基础上,主要解决CSS样式问题(以上说法可能不全面,但大体是这

打开masa blazor的正确姿势4.2:flex弹性布局-编程思维

MASA Blazor预定义了Flex弹性布局的样式,可以直接在class属性中直接使用。   一、复习一下之前提到过的Flex样式(转为MASA Blazor样式类): 1、在容器(父元素)上使用的样式-6个 .d-flex .d-inline-flex: 打开Flex弹性布局 此样式对应于CSS的display属性 块级容器中使用d-flex,行内容器中使用d-inline-flex

一次学俩vue&blazor:1.4基础-响应式数据-编程思维

一、声明式编程和响应式数据 1、声明式编程 逻辑层修改视图层元素属性值的方式有两种,一是命令式,先通过getElementById等方法获取元素对象,然后再修改对象的属性;二是声明式,先将视图层元素的属性值和逻辑层数据绑定,通过修改逻辑层数据,实现视图层元素属性值的自动更新。 现代前端开发框架,都采用声明式。 2、响应式数据 使用声明式编程的开发框架,需要通过特定的机制通知视图层更新。

maui新生2.5-数据绑定和mvvm:mvvm的属性验证-编程思维

一、MVVM的属性验证案例 Toolkit.Mvvm框架中的ObservableValidator类,提供了属性验证功能,可以使用我们熟悉的验证特性对属性的值进行验证,并将错误属性提取和反馈给UI层。以下案例实现对UI层的姓名和年龄两个输入框,进行表单提交验证。实现效果如下所示:         1、View  <ContentPage ......> <Cont

maui新生6.9-控件辅助功能①:动画animation-编程思维

一、基本使用 1、MAUI为所有VisualElement对象,定义了一系列动画扩展方法,所以控制动画的原理很简单,在UI层通过x:Name定义视觉对象的变量名(或在后台代码中直接创建视觉对象),然后再后台代码中通过“扩展方法”执行动画。 //UI层:MainPage.xaml <ContentPage ......> <ScrollView>

maui新生6.6-搜索栏searchhandler-编程思维

一、搜索栏SearchHandler的基本原理,如下图所示   搜索栏主要有两部分组成:UI控件和SearchHandler派生类。其中UI控件负责数据展示,并提供查询搜索和点击选择项的UI交互功能;SearchHandler派生类响应控件的查询和点击事件,并提供数据源、筛选结果和导航跳转功能。 SearchHandler派生类有两个重写方法:OnQueryChanged和OnItemSel

maui新生5.6-form表单类控件难点-编程思维

 一、表单类控件目录 Entry,单行输入框 Edit,多行输入框 CheckBox,复选框 RadioButton,单选框 Picker,下拉单选框 Switch,开关 Slider,滑块 Stepper,步进器 DataPicker,日期选择框 TimePicker,时间选择框 ActivityIndicator,显示等待 ProgressBar,进度条 Button,按钮 ImageBu

maui新生6.2-浮出控件导航flyout-flyoutitem/menuitem/header/footer-编程思维

如前章所述,Shell导航框架,在UI层面,有两种导航方式,一是浮出控件导航,二是底部Tab栏导航,本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能,组成部分如下图所示:      一、Header/Footer页头和页尾设置(Header和Footer的使用方式一样) 1、通过DataTemplate设置  <Shell ...... Shell.Fly

maui新生6.3-底部tab栏导航tabbar/tab/shellcontent-编程思维

一、TabBar的基本使用: 如果只需要底部Tab栏导航,则应使用TabBar。TabBar的使用,和FlyoutItem基本相同,如下图所示:         二、底部Tab栏的样式设置 Shell.TabBarBackgroundColor:设置在Shell或TabBar上,Tab栏背景色 Shell.TabBarDisabledColor:设置在Shell或TabBar上,不可用Tab

maui新生6.5-导航路由navigation-编程思维

MAUI的Shell导航框架,也是以路由方式进行导航,并提供了两套导航方式,一是如前面章节所述的视觉层次结构,会自动建立导航路由,可以进行不同层次页面的导航切换;二是为页面手动注册路由,并执行代码导航。   一、注册路由 1、视觉层次结构页面的路由注册 在视觉层次结构中(Shell>FlyoutItem或TabBar>Tab>ShellContent),框架自动建立导航路由,可

maui新生6.1-shell导航视觉层次结构-编程思维

一、Shell介绍 MAUI内置了一套导航框架Shell,主要提供了三类功能:视觉层次结构、路由导航、搜索框。其中视觉层次结构从文字上不是很好理解,可以认为是一套导航菜单系统,具有一定的外观样式和层次结构,且可以进行导航跳转。MAUI定义了三层视觉结构对象,第一层为FlyoutItem或TabBar,第二层为Tab,第三层为ShellContent。如下图所示:     注: 在手机端和PC