当前位置：首页 > news >正文

C# Blazor 学习笔记(8):row/col布局开发

news 2025/7/20 14:14:18

文章目录

前言
相关文章
代码
- row和col组件
- - B_row
  - B_col
  - 结构
- 使用

前言

可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善，所以很多组件要我们自己写。
我们对组件的要求是
我们在组件化一共有三个目的。

不用写CSS
不用写html
不用写交互逻辑

C# Blazor 学习笔记(7):组件嵌套开发

代码

我们直接上结果

row和col组件

为了防止和别的UI库冲突，我使用了B_为前缀

B_row

razor


<div class="B_Row">@ChildContent
</div>@code {[Parameter] public RenderFragment ChildContent { get; set; }
}

razor.css

.B_Row {/*border: 1px solid black;*/display: grid;/*flex-direction: row;*/width: 100%;grid-template-columns: repeat(12,1fr);grid-auto-flow: column;
}

B_col

razor

@if (Offset != 0)
{<div style=" grid-column-start: span @(Offset)"></div>
}<div class="B_Col" style=" grid-column-start: span @(Span)">@ChildContent
</div>@code {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public float Span { get; set; } = 12;[Parameter]public float Offset { get; set; } = 0;private Dictionary<string, object> ContentCss = new Dictionary<string, object>{};}

razor.css

body {
}.B_Col{border: 1px solid black;/*width:20%;*//*display:inline-grid;*//*grid-column-start:span 2;*/
}

tips:我这里用border是为了明显地展示

结构

在这里插入图片描述

使用

<B_row><B_col >1</B_col>
</B_row>
<B_row><B_col  Span = "6">1</B_col>
</B_row>
<B_row><B_col  Span = "6" Offset = "3">1</B_col>
</B_row>
<B_row><B_col Span = "3">1</B_col><B_col Span = "3">2</B_col><B_col Span = "3">3</B_col><B_col Span = "3">4</B_col>
</B_row>