随笔分类 - MAUI/Blazor/Vue/Uniapp
前端开发框架
摘要:#####MASA Blazorr提供了丰富的组件及其控制属性,用于母版页布局(MainLayout.razor)。这些组件包括MApp、MMain、MSystemBar、MAppBar、MNavigationDrawer、MFooter和MBottomNavigation。 #一、MApp和MMa
阅读全文
摘要:#####依照Vuetify的习惯,MASABlazor将RenderFragment称为插槽。RenderFragment是Blazor的一个难点,而MASA Blazor是二次开发的组件库,大量使用到插槽,所以有必要掌握这个功能。注:在Blazor中,一般将RenderFragment称为模板。
阅读全文
摘要:#####Grid网格布局,借鉴了Bootstrap,以Flex弹性布局为基础,使用 组件方式,让我们以更加简单直接的行列方式,进行灵活布局,是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局,上手Grid也会很快。 #一、Grid网格布局的相关组件 ###1、MConta
阅读全文
摘要:#一、声明式编程和响应式数据 ###1、声明式编程 逻辑层修改视图层元素属性值的方式有两种,一是命令式,先通过getElementById等方法获取元素对象,然后再修改对象的属性;二是声明式,先将视图层元素的属性值和逻辑层数据绑定,通过修改逻辑层数据,实现视图层元素属性值的自动更新。 现代前端开发框
阅读全文
摘要:MASA Blazor预定义了Flex弹性布局的样式,可以直接在class属性中直接使用。 #一、复习一下之前提到过的Flex样式(转为MASA Blazor样式类): ####1、在容器(父元素)上使用的样式-6个 .d-flex .d-inline-flex: 打开Flex弹性布局 此样式对应于
阅读全文
摘要:#一、关于组件样式的理解 ####1、框架和组件 前面我们已经说过,现代前端技术,无论是在框架层面(Blazor、Vue、React等),还是组件层面(Bootstrap、MASA Blazor、ElementUI、AntDesign等),本质上都是对HTML、CSS和JS的组合和封装。框架层面,主
阅读全文
摘要:#一、HTML和CSS关系 HTML元素定义网页的文档结构,CSS定义网页的排版样式。这句话不好理解,通过导航栏案例领会一下(以下案例非常精彩): ###1、导航栏的HTML文档结构 <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新
阅读全文
摘要:#一、响应式显示的本质 无论是在框架层次,如Blazor、Vue、React,还是在组件层次,如MASA Blazor、BootStrap、Bootstrap Blazor、ElementUI、AntDesign,尽管在开发环节有诸多差异,但在浏览器的运行环节,只要没有脱离Web,都是被编译为HTM
阅读全文
摘要:官网文档按拼音罗列组件,且部分嵌套组件没有在导航栏内列出,不利于浏览查阅。本篇文章的主要目的,主要是对所有组件按大家习惯的方式进行分类,简要介绍组件,并建立跳转官方文档的链接。 #一、导航布局类 ####1、MApp母版页布局: MApp:根组件 MMain:主体内容 MSystemBar:顶部①,
阅读全文
摘要:#一、MASA Blazor??? ####1、前端技术那么多,为什么选Blazor? 嗯?!~ 未来:Blazor将能够融合服务端渲染、SPA、WebAssembly、跨平台开发的多方优势。目前布局方向太多、想要得太多,所以感觉哪个方向都不得劲。 现实:如果就想蹲在.NET框架里,Blazor是最
阅读全文
摘要:一、基本使用 1、MAUI为所有VisualElement对象,定义了一系列动画扩展方法,所以控制动画的原理很简单,在UI层通过x:Name定义视觉对象的变量名(或在后台代码中直接创建视觉对象),然后再后台代码中通过“扩展方法”执行动画。 //UI层:MainPage.xaml <ContentPa
阅读全文
摘要:一、MVVM的属性验证案例 Toolkit.Mvvm框架中的ObservableValidator类,提供了属性验证功能,可以使用我们熟悉的验证特性对属性的值进行验证,并将错误属性提取和反馈给UI层。以下案例实现对UI层的姓名和年龄两个输入框,进行表单提交验证。实现效果如下所示: 1、View <C
阅读全文
摘要:一、基本使用(数据源在ViewModel中硬编码) //①在Models文件夹下,新建Employee.cs文件,创建Employee类型 public class Employee { public int Id { get; set; } public string Name { get; se
阅读全文
摘要:一、搜索栏SearchHandler的基本原理,如下图所示 搜索栏主要有两部分组成:UI控件和SearchHandler派生类。其中UI控件负责数据展示,并提供查询搜索和点击选择项的UI交互功能;SearchHandler派生类响应控件的查询和点击事件,并提供数据源、筛选结果和导航跳转功能。 Sea
阅读全文
摘要:MAUI的Shell导航框架,也是以路由方式进行导航,并提供了两套导航方式,一是如前面章节所述的视觉层次结构,会自动建立导航路由,可以进行不同层次页面的导航切换;二是为页面手动注册路由,并执行代码导航。 一、注册路由 1、视觉层次结构页面的路由注册 在视觉层次结构中(Shell > FlyoutIt
阅读全文
摘要:ShellContent是Shell视觉层次结构中,最终承载内容页的构件,Shell > FlyoutItem|TabBar > Tab > ShellContent > View。 一、按需加载内容页和应用启动时加载内容页 1、按需加载内容页。导航发生时,才加载内容页,按需创建。 【<ShellC
阅读全文
摘要:一、TabBar的基本使用: 如果只需要底部Tab栏导航,则应使用TabBar。TabBar的使用,和FlyoutItem基本相同,如下图所示: 二、底部Tab栏的样式设置 Shell.TabBarBackgroundColor:设置在Shell或TabBar上,Tab栏背景色 Shell.TabB
阅读全文
摘要:如前章所述,Shell导航框架,在UI层面,有两种导航方式,一是浮出控件导航,二是底部Tab栏导航,本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能,组成部分如下图所示: 一、Header/Footer页头和页尾设置(Header和Footer的使用方式一样) 1、通过DataTemp
阅读全文
摘要:一、RadioButton,单选框分组和选定值 <!--RadioButton的使用案例--> <ContentPage ...... xmlns:vm="clr-namespace:MauiApp15.ViewModels"> <!--实例化ViewModel,并设置为BindingContext
阅读全文
摘要:一、Shell介绍 MAUI内置了一套导航框架Shell,主要提供了三类功能:视觉层次结构、路由导航、搜索框。其中视觉层次结构从文字上不是很好理解,可以认为是一套导航菜单系统,具有一定的外观样式和层次结构,且可以进行导航跳转。MAUI定义了三层视觉结构对象,第一层为FlyoutItem或TabBar
阅读全文