首页 > 其他分享 >打开MASA Blazor的正确姿势4.3:Grid网格布局

打开MASA Blazor的正确姿势4.3:Grid网格布局

时间:2023-02-18 23:33:17浏览次数:57  
标签:MCol MASA 4.3 布局 网格 Grid 列数 属性

Grid网格布局,借鉴了Bootstrap,以Flex弹性布局为基础,使用 组件方式,让我们以更加简单直接的行列方式,进行灵活布局,是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局,上手Grid也会很快。

一、Grid网格布局的相关组件


1、MContainer(组织容器)

  • MRow的容器。作用是把多个MRow组织起来。虽然叫Container,但并不是Flex弹性布局中的那个Container,可以认为就是一个div。没有MContainer,仅使用MRow和MCol也可以进行网格布局。
  • Fluid属性,布尔类型,如为true,则无论视窗多大,容器都自适应视窗大小;如为false,则容器自适应为当前设备的最大宽度后,不再变大。

2、MRow(行)

  • MCol的容器。从Flex弹性布局来看,它才是真正的Container,主轴方向为X轴,自左向右排列,是否换行为wrap。
  • Justify属性:子元素(MCol)在主轴即X轴方向上的对齐方式。
  • Align属性:单行时,子元素在交叉轴即Y轴方向上的对齐方式。
  • AlignContent属性:多行时,子元素在交叉轴即Y轴方向上的对齐方式。
  • NoGutters属性:布尔类型,确定子元素之间是否有间隔。
  • Dense属性:布尔类型,如为true,则收缩。
  • Justify、Align和AlignContent支持响应式,如Justify/JustifySm/JustifyMd/JustifyLg/JustifyXl等。
  • Grid网格布局将每行划分为12列,子元素MCol通过Cols属性确定自身占据的列数,通过Offset属性定义偏移列数。

3、MCol(列)

  • MRow的子元素,不能单独使用。从Flex弹性布局来看,它就是Item。
  • Align属性,定义当前列在Y轴方向上的对齐方式,相当于Flex弹性布局的AlignSelf。
  • Order属性,定义当前列的排序,相当于Flex弹性布局的Order。支持响应式,不同断点的属性名为Order/OrderSm/OrderMd/OrderLg/OrderXl
  • Cols属性:Grid网格布局将每行划分为12列,Cols属性定义占据的列数。支持响应式,不同断点的属性名为Cols/Sm/Md/Lg/Xl
  • Offset属性:当前列向右偏移列数。支持响应式,不同断点的属性名为Offset/OffsetSm/OffsetMd/OffsetLg/OffsetXl

4、MSpacer(空白列)

  • MRow的子元素,可以使用空白列填充可用空间,或者在两个组件之间留出空间

5、其它行为说明

  • 如果MCol或MSpacer未定义占据列数,则均分当前行剩余列数
  • 换行wrap行为,举个例子说明,如第1个MCol占据9列,第2个MCol占据4列,当前行排列不下,第2个MCol换行。
  • 默认列与列之间有间隔,通过在MRow上设置NoGutters属性,消除间隔。
  • MCol的占据列数除了可以设置1~12数值外,可以设置为auto,如【cols="@("auto")"】,根据MCol的子元素确定尺寸。
  • 通过设置MCol的Class属性的左或右外边距为auto,可以将同级列强行分开。如【Class="ml-auto"】,当前列会被顶向最右边。


二、Grid网格布局的示例

Grid网格布局的示例,可详见官网>>>


标签:MCol,MASA,4.3,布局,网格,Grid,列数,属性
From: https://www.cnblogs.com/functionMC/p/17132222.html

相关文章

  • QGridLayout(表格布局)
    (一)使用QGridLayout控件的思路在新建QGridLayout对象之前,应该先将在将使用到的控件进行初始化。1.初始化布局新建QGridLayout之后,在桌面上就会出现一个网格状的布局,这个......
  • delphi cxGrid过滤器配合TFDQuery过滤器,完美!
    效果图:  设计图(数据库是ACCESS类型):   需求:1.cxGrid默认的模糊匹配符为%,太麻烦了,想用*号代替(ACCESS数据库,只认*,不认%)2.cxGrid默认是在用......
  • MASA Stack 1.0 发布会 —— 社区问题解答
    MASAStack1.0圆桌讨论Q1: 全职开源的团队,你们的收入是什么?1.首先感谢我们的金主朗诗德公司,朗诗德是一家大型的净水器研发、生产、销售的公司,我们的产品也在朗诗德公......
  • 【WPF】带模糊搜索的DataGrid
    带模糊搜索的DataGrid前端代码view<Windowx:Class="MVVM.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:......
  • 旋转网格超采样(Rotated Grid Supersampling)
    旋转网格超采样(RotatedGridSupersampling)这是对文章4-RookAntialiasing(RGSS)@AlanWolfe的翻译原文采用MIT协议发布上一篇文章讲解了采样点呈5点梅花状的梅......
  • Vue Grid Layout -️ 适用Vue.js的栅格布局系统(自定义页面)
    官网:https://jbaysolutions.github.io/vue-grid-layout/zh/github:https://github.com/jbaysolutions/vue-grid-layout 一个类似于Gridster的栅格布局系统,适用于Vue.j......
  • C、Grid game 【 Codeforces Round #534 (Div. 2) 】
    C、Gridgame题意:给你一个4×4的方格,然后给你一些1×2或者2×1的小方格,当这些方格在一行或者一列的时候会消除掉,问最佳放置位置。思路:QAQ,什么时候思维会变强......
  • grid++ 基本用法示例
     1.插入报表头、明细网格、报表尾右键-->插入-->报表节-->报表头、明细网格、报表尾2.添加标题报表头和报表尾可以插入:静态框、字段框、统计框、系统变量框、综合......
  • 打开MASA Blazor的正确姿势4.2:Flex弹性布局
    MASABlazor预定义了Flex弹性布局的样式,可以直接在class属性中直接使用。 一、复习一下之前提到过的Flex样式(转为MASABlazor样式类):1、在容器(父元素)上使用的样式-6个......
  • 打开MASA Blazor的正确姿势1:目录&MASA Blazor是???
    一、MASABlazor???1、前端技术那么多,为什么选Blazor?嗯?!~未来:Blazor将能够融合服务端渲染、SPA、WebAssembly、跨平台开发的多方优势(BlazorUnited)。目前布局方向太多、想......