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

文章目录

前言

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

我们对组件的要求是

我们在组件化一共有三个目的。

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

相关文章

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

代码

我们直接上结果

row和col组件

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

B_row

razor

java 复制代码
<div class="B_Row">
    @ChildContent
</div>

@code {
    [Parameter] 
    public RenderFragment ChildContent { get; set; }
}

razor.css

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

java 复制代码
@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

css 复制代码
body {
}

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

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

结构

使用

html 复制代码
<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>
相关推荐
YoungUpUp17 分钟前
【文件快速搜索神器Everything】实用工具强推——文件快速搜索神器Everything详细图文下载安装教程 办公学习必备软件
学习·everything·文件搜索·实用办公软件·everything 工具·文件快速搜索·搜索神器
RaLi和夕24 分钟前
单片机学习笔记.C51存储器类型含义及用法
笔记·单片机·学习
星梦清河39 分钟前
宋红康 JVM 笔记 Day15|垃圾回收相关算法
jvm·笔记·算法
武文斌771 小时前
ARM工作模式、汇编学习
汇编·嵌入式硬件·学习·arm
岑梓铭1 小时前
计算机网络第四章(4)——网络层《ARP协议》
网络·笔记·tcp/ip·计算机网络·考研·408
lingggggaaaa1 小时前
小迪安全v2023学习笔记(八十讲)—— 中间件安全&WPS分析&Weblogic&Jenkins&Jetty&CVE
笔记·学习·安全·web安全·网络安全·中间件·wps
ISDF-工软未来2 小时前
C# 泛型简单案例
c#
Jayyih2 小时前
嵌入式系统学习Day36(简单的网页制作)
学习·算法
QT 小鲜肉2 小时前
【QT随笔】结合应用案例一文完美概括QT中的队列(Queue)
c++·笔记·qt·学习方法·ai编程
zheshiyangyang2 小时前
TypeScript学习【一】
javascript·学习·typescript